使用导入的自定义 SCSS 组件编译 Tailwind CSS

Question

I've got a running Vue app created with Vue CLI 4 and also installed Tailwind CSS with the help of this tutorial . Since I want to put my custom components into single files and write them in SCSS, my tailwind config file looks like

// tailwind.scss
@tailwind base;
@tailwind components;
@import '@/assets/scss/components/button.scss';
@tailwind utilities;

While serving the app with vue-cli-service serve or building it with vue-cli-service build works great, I am missing the autocompletion feature of my IntelliJ IDEA for all the tailwind classes so that I don't have to use (even tough great) cheat sheets like this .

My idea is to introduce a npm script that will build the full tailwind.css , so that the IDE can utilize it when autocompleting css classes. I know that I can manually build such file with npx tailwindcss build tailwind.scss -o tailwind.css .

However, although that gives me autocompletion for the built-in tailwind classes, it of course neither compiles the SCSS in my custom components nor does it resolve the @import at all. A solution could be to 1) resolve the @import , 2) compile the SCSS to CSS and 3) use the aforementioned tailwindcss build to finally build the full tailwind.css .

Since I am very inexperienced with Webpack, I wonder if you can give me some hints of how to achieve this. Would you even use Webpack for this task?

Answer 1

Webpack is definitely the way to go here, I use this config all the time. See the Tailwind documentation page for setup documentation with webpack

Don't worry about autocomplete for Tailwind, you will learn those classes in no time plus their docs and search function on there are brilliant, no need for external cheatsheets imho.

Answer 2

If you're using post-cssimport you need to put the @import statement before everything else. Check out https://tailwindcss.com/docs/using-with-preprocessors#build-time-imports