🐛 BUG: Unable to use Tailwind CSS with Snowpack.

Tarang74 commented 2 years ago

Quick checklist

[x] 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

Clone the repository below.

Run the following commands:

npm install
npx snowpack dev 
# Alternatively: npm run start

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 commented 2 years ago

I also had this problem on https://github.com/LouieMartin/snowpack-react-template

LouieMartin commented 2 years ago

BTW Tarang74 css files works but scss doesnt

Tarang74 commented 2 years ago

BTW Tarang74 css files works but scss doesnt

On my repo it works?

LouieMartin commented 2 years ago

On my repo it works?

yes but only on .css files not .scss files

LouieMartin commented 2 years ago

and, its called recompiled not rebuild because tailwind changes or "recompiles" the classes and adds it to the styles to reduce build size

Tarang74 commented 2 years ago

On my repo it works?

yes but only on .css files not .scss files

I'm confused? When I start a dev server on my repo, and modify src/index.scss the file is automatically compiled live to localhost:port/dist/index.css.

Hence it works? I don't understand why it doesn't work for you?

Tarang74 commented 2 years ago

and, its called recompiled not rebuild because tailwind changes or "recompiles" the classes and adds it to the styles to reduce build size

ah yes that's right, must've mistyped.

LouieMartin commented 2 years ago

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

LouieMartin commented 2 years ago

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

LouieMartin commented 2 years ago

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

did this atleast work?

LouieMartin commented 2 years ago

On my repo it works?

yes but only on .css files not .scss files

I'm confused? When I start a dev server on my repo, and modify src/index.scss the file is automatically compiled live to localhost:port/dist/index.css.

Hence it works? I don't understand why it doesn't work for you?

and it doesnt automatically recompile scss to css it recompiles it to a js file

Tarang74 commented 2 years ago

On my repo it works?

yes but only on .css files not .scss files

I'm confused? When I start a dev server on my repo, and modify src/index.scss the file is automatically compiled live to localhost:port/dist/index.css.

Hence it works? I don't understand why it doesn't work for you?

and it doesnt automatically recompile scss to css it recompiles it to a js file

Are you talking about building the app for production? I'm only concerned about development builds

LouieMartin commented 2 years ago

On my repo it works?

yes but only on .css files not .scss files

I'm confused? When I start a dev server on my repo, and modify src/index.scss the file is automatically compiled live to localhost:port/dist/index.css.

Hence it works? I don't understand why it doesn't work for you?

and it doesnt automatically recompile scss to css it recompiles it to a js file

Are you talking about building the app for production? I'm only concerned about development builds

dev build

LouieMartin commented 2 years ago

it automatically makes the scss files a js file on a dev server but i am pretty sure that it doesnt to that on the production build

Tarang74 commented 2 years ago

it automatically makes the scss files a js file on a dev server but i am pretty sure that it doesnt to that on the production build

Oh I see, so any additional SCSS files that are imported from, for example, app.tsx, are automatically placed in the <head> of the HTML document, so yes I guess you're right. The only file that is compiled to CSS, is index.scss.

LouieMartin commented 2 years ago

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?

Tarang74 commented 2 years ago

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?

FredKSchott / snowpack