Deno•2y ago

No Tailwind CSS Autocompletion in WebStorm IDE

Hey everyone,
I’m working on a project using Tailwind CSS in WebStorm (JetBrains IDE), but I'm facing an issue where the autocompletion for Tailwind classes isn't working. The project was just created using the official command from the Fresh documentation:

deno run -A -r https://fresh.deno.dev

deno run -A -r https://fresh.deno.dev

During setup via the console, I specified that I wanted to use Tailwind CSS. I've grouped everything related to Fresh into an

app/

app/

folder, including the Tailwind CSS configuration (e.g.,

tailwind.config.ts

tailwind.config.ts

app/static/styles.css

app/static/styles.css

).

I’m using the following versions:
- Fresh:

1.6.8

1.6.8

- Preact:

10.19.6

10.19.6

- TailwindCSS:

3.4.1

3.4.1

- Deno standard library:

0.216.0

0.216.0

Here's an example of how I'm using Tailwind with

Preact

Preact

in a TSX file:

export default function MyComponent() {
  return (
    <div className="bg-blue-500 text-white p-4 rounded-lg shadow-md">
      <h1 className="text-xl font-bold">Tailwind with WebStorm</h1>
      <p className="mt-2">This is a simple example using Tailwind CSS with Fresh and Preact in WebStorm.</p>
    </div>
  );
}

export default function MyComponent() {
  return (
    <div className="bg-blue-500 text-white p-4 rounded-lg shadow-md">
      <h1 className="text-xl font-bold">Tailwind with WebStorm</h1>
      <p className="mt-2">This is a simple example using Tailwind CSS with Fresh and Preact in WebStorm.</p>
    </div>
  );
}

I’ve also tried using

class

class

instead of

className

className

to see if it resolves the issue, but that didn’t work either. I get a warning saying 'Attribute class is not allowed here', which is why I’m using

className

className

instead. However, the autocompletion for Tailwind classes still doesn't appear.

Has anyone experienced this issue before or knows how to configure WebStorm properly to enable autocompletion? Any plugins or tips would be appreciated!

Thanks in advance!

No Tailwind CSS Autocompletion in WebStorm IDE

deno run -A -r https://fresh.deno.dev

deno run -A -r https://fresh.deno.dev

During setup via the console, I specified that I wanted to use Tailwind CSS. I've grouped everything related to Fresh into an

app/

app/

folder, including the Tailwind CSS configuration (e.g.,

tailwind.config.ts

tailwind.config.ts

app/static/styles.css

app/static/styles.css

).

I’m using the following versions:
- Fresh:

1.6.8

1.6.8

- Preact:

10.19.6

10.19.6

- TailwindCSS:

3.4.1

3.4.1

- Deno standard library:

0.216.0

0.216.0

Here's an example of how I'm using Tailwind with

Preact

Preact

in a TSX file:

export default function MyComponent() {
  return (
    <div className="bg-blue-500 text-white p-4 rounded-lg shadow-md">
      <h1 className="text-xl font-bold">Tailwind with WebStorm</h1>
      <p className="mt-2">This is a simple example using Tailwind CSS with Fresh and Preact in WebStorm.</p>
    </div>
  );
}

export default function MyComponent() {
  return (
    <div className="bg-blue-500 text-white p-4 rounded-lg shadow-md">
      <h1 className="text-xl font-bold">Tailwind with WebStorm</h1>
      <p className="mt-2">This is a simple example using Tailwind CSS with Fresh and Preact in WebStorm.</p>
    </div>
  );
}

I’ve also tried using

class

class

instead of

className

className

to see if it resolves the issue, but that didn’t work either. I get a warning saying 'Attribute class is not allowed here', which is why I’m using

className

className

No Tailwind CSS Autocompletion in WebStorm IDE

No Tailwind CSS Autocompletion in WebStorm IDE

Similar Threads

Similar Threads

Similar Threads