Search code examples
webstormtailwind-csspostcss

How to setup WebStorm to use PostCSS/Tailwind


I have the latest WebStorm 2020.3. It supports Tailwind CSS, I installed the PostCSS plugin and used NPM to install Tailwind CSS and all sorts of plugins.

What I have no clue about is how to setup WebStorm to actually use PostCSS with a file watcher to actually run and do anything useful. I asked JetBrains and they had no actual useful information.

All I need is some simple example of how to get WebStorm to use Tailwind.


Solution

  • Initial project setup doesn't depend on an IDE. For the quick start, documentation on the Tailwind CSS site should be helpful.

    Tailwind CSS plugin in WebStorm 2020.3 adds convenient features like Tailwind CSS classes completion and CSS preview. It doesn't require any configuration, it will just work as soon as you have node_modules/tailwindcss/tailwind.css and node_modules/.bin/tailwind local files.

    If you use tailwndcss version 2.x then make sure you also have dependencies on postcss and autoprefixer in your package.json, as written in https://tailwindcss.com/docs/upgrading-to-v2#install-tailwind-css-v2-0-and-post-css-8

    Basic setup doesn't require to configure any File Watcher.