Faster webpack compile time

[codingluke]

Hi there,

when adding custom CSS into a separate file, webpack should not have to compile the whole tailwindcss again, but only the changes in application.scss.

Moreover, I personally like it to have the custom CSS in a separate file and not in between the tailwind includes.

See: tailwindlabs/tailwindcss#443 (comment)

Before

After

I hope this will help others too. 😄

[dixpac]

This is awesome @codingluke! Indeed on our app this speeds up recompilation time ~3x.

Maybe we could organize the files a bit differently such as:

stylesheets/
  components/
  base.scss
  components.scss
  tailwind.config.js
  utilities.css

// base.scss

// This injects Tailwind's base styles, which is a combination of Normalize.css and additional base styles.
@import 'tailwindcss/base';

// Add custom base styles, applied after the tailwind-base classes

// components.scss
`@import 'tailwindcss/components';`
  
 // Custom components....

// utilities.scss

// This injects all of Tailwind's utility classes, generated based on your config file.
@import 'tailwindcss/utilities';

// Include vendor css.

// application.js

// These are imported separately for faster Webpack recompilation
import "stylesheets/base.scss"
import "stylesheets/components.scss"
import "stylesheets/utilities.scss"

[codingluke]

Hi @dixpac, Thanks for your input :)

I see your point! However, isn't application.scss kind of a convention name in Rails? Also I am not sure if the custom CSS can go directly after the `@import "tailwindcss/base". I have to check the benchmarks first.
Anyways, before I spend too much time, I would like to have @dhh feedback for the naming as naming is hard ;)

[codingluke]

@dixpac, I just checked the benchmarks, it is totally fine with your structure too 👍 So when everybody can confirm on this I will adapt it.

[codingluke]

@dixpac why do we need the special components folder? There is also no folder to structure the base styles (and I would do this too).

I see two ways here:

1. Everybody should add the own structure
2. We give them a structure (CoC). Just to do that, I am not too much experienced with tailwind ;)