Add stylesheets path to TailwindCSS' content list

[nickjj]

Hi,

While using Rails 7.0.0 with Tailwind I noticed that if I changed my application.tailwind.css file, such as adding these lines at the bottom:

body {
  background-color: #00ff00;
}

The tailwindcss watcher wasn't picking up the change and it did not produce a new build.

After applying this PR's patch it picks up the changes and it does produce a new build.

[pbstriker38]

Tailwind docs say to not do this.

https://tailwindcss.com/docs/content-configuration#:~:text=Never%20include%20CSS%20files%20in%20your%20content%20configuration

[nickjj]

Tailwind docs say to not do this.

It mentions not to include the individual CSS file(s) that "Tailwind is generating". That would be the output directory.

It's also written in a way that tries to push you into creating template partials and components instead of creating CSS classes inside of CSS files with its "configure Tailwind to scan your templates where your class names are being used" line.

You also can't only include application.tailwind.css because it won't pick up any files that you @import. You have to include all of your source CSS files. Without doing it in the way that matches this PR, then you won't be able to add any custom CSS where your CSS originates in a CSS file.

[pbstriker38]

I do not have my source application.tailwind.css in my content list and the watch process does pick up file changes and rebuilds.

content list

content: [
  './app/components/**/*.html.erb',
  './app/components/**/*.rb',
  './app/views/**/*.html.erb',
  './app/helpers/**/*.rb',
  './app/javascript/**/*.js'
]

application.tailwind.css

@import "tailwindcss/base";
@import "./custom_base_styles.css";

@import "tailwindcss/components";
@import "./custom_components.css";

@import "tailwindcss/utilities";
@import "./custom_utilities.css";

[nickjj]

Mine does not.

Do you have any of your CSS imported in your JS (I don't)? Also are you running tailwindcss with the --postcss flag (I am)?

[pbstriker38]

I am not importing css in JS. I am using the --postcss flag with the following config

module.exports = {
  plugins: {
    'postcss-import': {},
    tailwindcss: {},
    autoprefixer: {},
    ...(process.env.MINIFY_CSS === 'true' ? { cssnano: {} } : {})
  }
}

[nickjj]

Do things change if you use:

module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}

With: tailwindcss --postcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css --watch