Tailwind CSS

Before you start

Make sure you have Node.js on your computer. Configure a Node.js interpreter in your project as described in Configuring a local Node.js interpreter, in Using Node.js on Windows Subsystem for Linux, or in Configuring remote Node.js interpreters.
Make sure the CSS and Tailwind CSS bundled plugins are enabled in the Installed tab of the Settings | Plugins page as described in Managing plugins.
Make sure, the tailwindcss package is listed as a dependency in your package.json and you project is configured correctly, via an @import "tailwindcss" directive in a CSS file (TailwindCSS 4) or in a tailwind.config.js (TailwindCSS 3) file.
Alternatively, install and configure Tailwind CSS as described below.

Install and configure Tailwind CSS

Open the embedded Terminal (AltF12) and type:
```
npm install -D tailwindcss
```
Open the CSS file where you want to use Tailwind CSS and add the following import statement to it:
```
@import "tailwindcss";
```
Restart the Tailwind CSS Language Server. To do that, click on the Status bar and then click next to Tailwind CSS.
Open your HTML file and add a link to the CSS file under the <head></head> tag, for example, <link href="/src/styles.css" rel="stylesheet">

Configure the Tailwind CSS Language Server

Install the latest version of the @tailwindcss/language-server package globally. To do that, open the embedded Terminal (AltF12) and type:
```
npm install -g @tailwindcss/language-server
```
Open the Settings dialog (CtrlAlt0S) and go to Settings | Languages & Frameworks | Style Sheets | Tailwind CSS.
In the Language Server field, specify the path to the @tailwindcss/language -server package.
Optionally, customize the default Tailwind CSS configuration options. For example, you may want to tune the HTML attributes list for which to provide class completions or use an experimental regular expression format to specify additional places where completions should be triggered.
In the Configuration area, update the properties to add configuration options.

Complete Tailwind CSS classes

The Tailwind CSS Language Server provides autocompletion for Tailwind CSS classes in various contexts, for example, in HTML and in CSS files after @apply directives, in JavaScript string literals, etc. In completion lists, suggestions from the Language Server are marked with while indicates suggestions from classes that are already used in the project.