# Tailwind CSS > **TL;DR** > Available only in IntelliJ IDEA with the Ultimate subscription: [download](https://www.jetbrains.com.cn/en-us/idea/download/) to try or [explore the features](https://www.jetbrains.com.cn/en-us/products/compare/?product=idea&product=idea-ult). > > > > > > Required plugins: > > > > `CSS` -  the plugin is bundled with IntelliJ IDEA and enabled by default. > > > > `Tailwind CSS` -  install the plugin on the Settings | Plugins page, tab Marketplace. The plugin is available only in IntelliJ IDEA with the Ultimate subscription. IntelliJ IDEA integrates with [Tailwind CSS](https://tailwindcss.com) providing [Tailwind CSS syntax support](https://tailwindcss.com/docs/editor-setup), completion for Tailwind CSS class names, as well as CSS functions and directives, preview of the resulting CSS on hover, and Tailwind CSS-specific inspections. Tailwind CSS support in IntelliJ IDEA is backed by the [Tailwind CSS Language Server](https://www.npmjs.com/package/@tailwindcss/language-server) that detects the Tailwind CSS package and, based on the package version, searches for a Tailwind CSS-specific project configuration: * With Tailwind CSS 4, the Language Server looks for a CSS file with an `@import "tailwindcss"` directive. * With Tailwind CSS 3, the Language Server looks for a `tailwind.config.js` file. IntelliJ IDEA is shipped with a bundled Tailwind CSS Language Server. However, it is recommended that you keep the Language Server up to date by downloading the latest server version and specifying the path to it on the `Settings | Languages &Frameworks | Style Sheets | Tailwind CSS` page as described in [Configure the Tailwind CSS Language Server](#ws_tailwind_configure_language_server). ## Before you start Procedure: 1. Make sure you have [Node.js](http://nodejs.org/) on your computer. Configure a Node.js runtime in your project as described in [Configuring a local Node.js interpreter](developing-node-js-applications.html#ws_node_configure_local_node_interpreter), in [Using Node.js on Windows Subsystem for Linux](developing-node-js-applications.html#ws_node_wsl), or in [Configuring remote Node.js runtimes](configuring-remote-node-interpreters.html). 2. Make sure the CSS bundled plugin is enabled in the settings. Press `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS)) to open settings and then select `Plugins`. Click the Installed tab. In the search field, type CSS. For more information about plugins, refer to [Managing plugins](managing-plugins.html). 3. Install and enable the Tailwind CSS plugin on the Settings | Plugins page, tab Marketplace, as described in [Installing plugins from JetBrains Marketplace](managing-plugins.html#install_plugin_from_repo). The plugin is available only in IntelliJ IDEA with the Ultimate subscription. 4. 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](#ws_css_tailwind_install_configure). ## Install and configure Tailwind CSS Find detailed instructions on the [Tailwind CSS official website](https://tailwindcss.com/docs/installatione). Procedure: 1. Open your command-line shell or the embedded Terminal (`Alt+F12` (Windows), `⌥ F12` (macOS), `⌥ F12` (IntelliJ IDEA Classic (macOS)), `⌘ ⌃ T` (macOS System Shortcuts), `Alt+F12` (XWin), `Alt+F12` (GNOME), `Alt+F12` (KDE), `Alt+F12` (Emacs), `Alt+F12` (Sublime Text), `⌥ F12` (Sublime Text (macOS)), `Alt+F12` (NetBeans), `Ctrl+Alt+1` (Visual Studio), `⌘ ⌃ 1` (Visual Studio (macOS)), `Alt+F12` (Eclipse), `⌥ F12` (Eclipse (macOS))) and type: ```SHELL npm install -D tailwindcss ``` 2. Open the CSS file where you want to use Tailwind CSS and add the following `import` statement to it: ```CSS @import "tailwindcss"; ``` 3. Restart the Tailwind CSS Language Server. To do that, click the Language Services widget on the Status bar (the icon is either ![the Language Services widget](https://resources.jetbrains.com.cn/help/img/idea/2026.2/icon_tailwind_ls_server_status_bar.png) or ![the Language Services widget](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app-client.expui.json.object.svg)), and then click ![the Restart Service icon](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app.actions.stopAndRestart.svg) next to Tailwind CSS. ![Restart Tailwind CSS server](https://resources.jetbrains.com.cn/help/img/idea/2026.2/styles.css" rel="stylesheet">` ### Configure the Tailwind CSS Language Server Tailwind CSS support in IntelliJ IDEA is backed by the [Tailwind CSS Language Server](https://www.npmjs.com/package/@tailwindcss/language-server) that detects the Tailwind CSS package and, based on the package version, searches for a Tailwind CSS-specific project configuration: * With Tailwind CSS 4, the Language Server looks for a CSS file with an `@import "tailwindcss"` directive. * With Tailwind CSS 3, the Language Server looks for a `tailwind.config.js` file. IntelliJ IDEA is shipped with a bundled Tailwind CSS Language Server. However, it is recommended that you keep the Language Server up to date. You can also customize the default Tailwind CSS [configuration options](#ws_css_tailwind_configuration_customize_options). Procedure: 1. Install the latest version of the [@tailwindcss/language-server package](https://www.npmjs.com/package/@tailwindcss/language-server) globally. To do that, open your command-line shell or the embedded Terminal (`Alt+F12` (Windows), `⌥ F12` (macOS), `⌥ F12` (IntelliJ IDEA Classic (macOS)), `⌘ ⌃ T` (macOS System Shortcuts), `Alt+F12` (XWin), `Alt+F12` (GNOME), `Alt+F12` (KDE), `Alt+F12` (Emacs), `Alt+F12` (Sublime Text), `⌥ F12` (Sublime Text (macOS)), `Alt+F12` (NetBeans), `Ctrl+Alt+1` (Visual Studio), `⌘ ⌃ 1` (Visual Studio (macOS)), `Alt+F12` (Eclipse), `⌥ F12` (Eclipse (macOS))) and type: ```SHELL npm install -g @tailwindcss/language-server ``` 2. Open the Settings dialog (`Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))) and go to `Settings | Languages & Frameworks | Style Sheets | Tailwind CSS`. 3. In the Language Server field, specify the path to the `@tailwindcss/language -server` package. 4. Optionally, customize the default Tailwind CSS [configuration options](https://github.com/tailwindlabs/tailwindcss-intellisense#extension-settings). For example, you may want to tune the [HTML attributes](https://github.com/tailwindlabs/tailwindcss-intellisense#tailwindcssclassattributes) list for which to provide class completions or use an experimental [regular expression format](https://github.com/tailwindlabs/tailwindcss/issues/7553#issuecomment-735915659) 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 ![the Tailwind CSS icon](https://resources.jetbrains.com.cn/help/img/idea/2026.2/icon_tailwind.png) while ![the Class icon](https://resources.jetbrains.com.cn/help/img/idea/2026.2/icon_completion_list_class.png) indicates suggestions from classes that are already used in the project. ![Completion list — suggestions from the server and from the project](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_tailwind_completion_tw_classes_and_used_classes.png) ### Preview the resulting CSS When you hover over a Tailwind CSS class in an HTML or CSS file, IntelliJ IDEA shows you a Documentation popup with the preview of the resulting CSS. To view the preview in a tool window, click ![the More icon](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app-client.expui.general.moreVertical.svg) and select Show in Documentation Tool Window. ![CSS preview](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_tailwind_css_preview.png) The preview is also shown in the Documentation popup (`Ctrl+Q` (Windows), `F1` (macOS), `⌃ J` (IntelliJ IDEA Classic (macOS)), `⌘ I` (macOS System Shortcuts), `Ctrl+Q` (XWin), `Ctrl+Q` (GNOME), `Ctrl+Q` (KDE), `Ctrl+Q` (Emacs), `Ctrl+Q` (Sublime Text), `Ctrl+Q` (Sublime Text (macOS)), `Ctrl+Q` (NetBeans), `Ctrl+K, I` (Visual Studio), `⌘ K, I` (Visual Studio (macOS)), `Alt+Middle-Click` (Eclipse), `⌥ Middle-Click` (Eclipse (macOS))) when you complete your code. ![Preview the resulting CSS while completing code](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_tailwind_css_preview_completion.png) ### Tailwind CSS support in .slim, .haml, and other files IntelliJ IDEA can provide completion for Tailwind CSS classes within other filetypes, for example, in `.slim`, `.haml`, `.jte`, `.kte`, etc. Procedure: 1. Press `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS)) to open settings and then select `Languages & Frameworks | Style Sheets | Tailwind CSS`. 2. In the `includeLanguages` property, add contexts where you want to get completion for Tailwind CSS classes. Use the following format: * `"slim": "slim"` * `"haml": "haml"` * `"jte": "html"` * `"kte": "html"` 3. To enable Tailwind CSS class completion in Slim templates and `.haml` files, set the `emmetCompletions` property to `true`. ![Add custom contexts for completion](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_css_tailwind_custom_contexts_settings.png) ## Troubleshooting If you stop getting Tailwind CSS-specific coding assistance, that may happen for one of the following reasons: Tailwind CSS Language Server is outdated : Install the latest version of the Tailwind CSS Language Server [as described above](#ws_tailwind_configure_language_server). The CSS file with @import 'tailwindcss' is corrupted : > **Note:** : > For projects that use Tailwind CSS version 4 and later. : : : : If a CSS file with @import 'tailwindcss' is corrupted, it may break server initialization. : : In that case, an error indicator ![an Error icon](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app.expui.run.testError.svg) is shown on the Status bar and also next to the Tailwind CSS item. : : : : : : ![An error indicator is shown on the Status bar](https://resources.jetbrains.com.cn/help/img/idea/2026.2/tailwind_css_troubleshooting_list_css_file_corrupted.png) : : : : To fix the problem: : : : : 1. : : Try commenting out everything except `@import "tailwindcss"`, save the CSS file, and restart the server. : : : : 2. : : Remove comments, save the file, and restart the server step by step until you locate the fragment where the problem is. : : : : > **Note:** : > To restart the server, use the Language Services widget in the Status bar [as described above](#ws_css_tailwind_restart_server). The Tailwind CSS Language Server does not start : When such errors occur, the Language Services widget in the Status bar and the Tailwind CSS item are marked with ![an Error icon](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app.expui.run.testError.svg). : : : : ![Tailwind CSS Language Server error](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_css_tailwind_server_error.png) : : Most often, such errors are caused by incorrect Node.js configuration. To solve the problem: : : : : 1. : : Press `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS)) to open settings and then select `Languages&Frameworks | JavaScript Runtime`. : : : : 2. : : Make sure that Node.js is selected in the Preferred runtime field. : : : : 3. : : Make sure that the path to your Node.js runtime is correct. : : : : : : Learn more from [Configuring Node.js : interpreters](developing-node-js-applications.html#ws_node_configure_local_node_interpreter).