Thibaud Posts

Thibaud

•Created by Thibaud on 9/28/2024 in #help

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/ folder, including the Tailwind CSS configuration (e.g., tailwind.config.ts, app/static/styles.css). I’m using the following versions: - Fresh: 1.6.8 - Preact: 10.19.6 - TailwindCSS: 3.4.1 - Deno standard library: 0.216.0 Here's an example of how I'm using Tailwind with 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 instead of 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 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!

1 replies