Non-JVM technologies
Style sheets
Tailwind CSS

Ultimate
Tailwind CSS

Last modified: 19 January 2023

Available only in IntelliJ IDEA Ultimate: download to try or compare editions

Required plugins:

CSS, Tailwind CSS - The plugins are available only in IntelliJ IDEA Ultimate, where they are enabled by default.

IntelliJ IDEA integrates with the Tailwind CSS framework including completion for Tailwind classes in HTML files and completion suggestions for pseudo-class variants, preview of the resulting CSS on hovering over classes in HTML and CSS files or on autocompletion. IntelliJ IDEA recognizes tailwind.config.js files and provides completion based on customization you make to them.

Before you start

Make sure you have Node.js on your computer. Also make sure that your Node.js version complies with the Tailwind CSS requirements. For example, Tailwind CSS v2.0 requires Node.js 12.13 or later. Learn more from the Tailwind CSS Upgrade guide.
Configure a Node.js interpreter in your project as described in Configuring a local Node.js interpreter, or 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.

Install Tailwind CSS

Open the embedded Terminal (Alt+F12) .
To install Tailwind CSS, type:
npm install -D tailwindcss
To generate a configuration file, type:
npx tailwindcss init
As result, a tailwind.config.js configuration file is created in the root of your project.

Learn more from the Tailwind CSS official website.

Complete Tailwind classes

IntelliJ IDEA autocompletes Tailwind classes in HTML files and in CSS files after the @apply directive.

Completing Tailwind classes after @apply directive

IntelliJ IDEA suggests Tailwind classes for completion in JavaScript string literals.

Completion for Tailwind classes in JavaScript string literals

Completion suggestions are also shown for pseudo-class variants.

Completion suggestions for pseudo-class variants

Preview the resulting CSS

When you hover over a Tailwind class in an HTML or CSS file, IntelliJ IDEA shows you the preview of the resulting CSS.

The preview is also shown in the Documentation popup (Ctrl+Q) when you complete your code.

Preview the resulting CSS while completing code

Edit your tailwind.config.js

IntelliJ IDEA provides code completion based on the customization you make through your tailwind.config.js configuration files. For example, if you define a custom theme with new colors, newly generated classes with the name of the custom color will be shown in the completion popup.

Completion based on customization in tailwind.config.js

Thanks for your feedback!

Was this page helpful?

UltimateTailwind CSS﻿

Before you start﻿

Install Tailwind CSS﻿

Complete Tailwind classes﻿

Preview the resulting CSS﻿

Edit your tailwind.config.js﻿