Tailwindcss 4 wont work wihout import in each css files

Hello,

Does anyone have try the new version of tailwind?

I try the upgrade on our project but the issue is that I have to add the @import 'tailwindcss' in each CSS files.

That’s really annoying.

Does anyone have been able to use tailwind 4 without having this issue?

Very interested in this one myself and have held off on Tailwind 4 across the board.

The leadership of Tailwind pretty much face-planted on some fundamentals if you watch the preview video: there seems to be a need for the reality of that to set in before Tailwind 4 becomes usable in real life. It was disproportionately focused on the low-end of the sophistication spectrum unfortunately.

@peernohell
Did you do this?

Are you using the Postcss plugin approach or the Vite plugin approach?

And are your CSS files css modules (e.g. maybe with @apply) or global stylesheets?

I was just about to jump into adding Tailwind 4 myself, but I had some more fundamental updates to do first (which sort of conga-lined out of control, e.g. Meteor 2 → Meteor 3, Vue 2 → Vue 3, Vuetify 2 → Vuetify 3 etc…).

In any case I would assume the expected behaviour is you only need to add Tailwind to one global stylesheet, so what you’re describing sounds like something has gone wrong somewhere :frowning:

Sorry I forgot to share my test project

that is a fresh meteor 3 blaze project.
the postcss file should have the correct configuration

css are just global stylesheets.
maybe it’s the issue but it was not the case with tailwind v3 :confused:

I name the post css config file as per the Meteor recommendation. Can you try it please:

PostCSS is a powerful tool for processing CSS in Meteor applications. Here’s an overview of how PostCSS is integrated and used in Meteor:

  1. Built-in Support: Starting from Meteor 2.7, PostCSS is built into the standard-minifier-css package. This means you can use PostCSS plugins without needing additional packages. Migrating to Meteor 2.7

  2. Configuration: To use PostCSS, you need to install the necessary npm peer dependencies and create a configuration file:

    meteor npm install -D postcss postcss-load-config
    

    :point_right: :point_right: :point_right: Then create a postcss.config.js file in your project root:

    module.exports = {
      plugins: {
        autoprefixer: {},
      }
    };
    

    Standard Minifier CSS

  3. Plugin Usage: You can use various PostCSS plugins. For example, Autoprefixer is a popular plugin that automatically adds vendor prefixes to CSS rules.

  4. Processing: PostCSS will process all CSS files in your app, including those from Meteor packages. If you need to exclude certain packages, you can use the excludedMeteorPackages option in your PostCSS config. Standard Minifier CSS

  5. Integration with Build System: PostCSS is part of Meteor’s build system, running after the compilation phase but before minification. This allows it to process all CSS, including that generated by preprocessors like Sass or Less. Guide > Build System > CSS processing

Remember to restart your Meteor application after making changes to the PostCSS configuration for the changes to take effect.