🐛 BUG: Unable to use Tailwind CSS with Snowpack.

Quick checklist

• I am using the latest version of Snowpack and all plugins.

What package manager are you using?

npm

What operating system are you using?

Windows

Describe the bug

Hi I am using React, Tailwind CSS and Sass with Typescript, and can’t manage to get the snowpack dev server to “recompile” the SCSS file upon adding a new Tailwind CSS class in my .tsx files.

There have been previous bug reports about this problem, and some of them have stated that the problem had been fixed (for them) but I could not resolve the issue on my end.

Note I’m coming from a Webpack background after hearing about the improved live update times, so I do not fully understand all the options of Snowpack. Feel free to suggest any fixes in my config files, and any help is appreciated.

My project is setup using this template, and has a very specific tree that I would like to maintain if that is possible.

All configuration and testing files will be available in a minimal GitHub repository (shown below).

Steps to reproduce

1. Clone the repository below.
2. Run the following commands:

npm install
npx snowpack dev 
# Alternatively: npm run start

1. Follow the steps shown on the webpage (webpage contents in src/App.tsx).

Error! dist/index.css (on localhost) does not update when a new Tailwind CSS class is added. It (the Tailwind CSS class) is added only when the SCSS file itself is modified.

Expectation: Snowpack should automatically invoke the SCSS recompile when a .tsx etc. file is modified.

Link to minimal reproducible example (optional)

https://github.com/Tarang74/snowpack-react-tailwind-sass-typescript

[LouieMartin]

I really really really want to have an index.scss and tailwind still recompiles correctly 😦

[Tarang74]

nope it doesnt work if in the src/ folder still has .scss file rename it to index.css

did this atleast work?

btw did this work?

I’m not sure what you want me to do?