tailwindcss@4 with sass

[tammy-grows]

Hello,

I cannot get import "tailwindcss/base" to work in my SASS stylesheet. Error is : SassError: Can't find stylesheet to import.

Using tailwindcss@4.0.0-alpha.15, sass@1.4.7, postcss@8.4.31.

In vue.config.js

const stylePlugin = require('tailwindcss');

postcss: {
        postcssOptions: {
          plugins: [
            stylePlugin.postcss,
          ],
        },
      },

In my global.scss stylesheet:

@import 'tailwindcss/base', 'tailwindcss/components', 'tailwindcss/utilities';

[wongjn]

You'd do:

@import 'tailwindcss/index.css';

For v4

[MrBns]

its a long ago. but still I am in same problem.

this question is not answered. 😑

[karldivad]

This works on Tailwind 4.1.3:

@import 'tailwindcss';
@config "../tailwind.config.js";

The @config line is optional, but using it works better than inline (e.g., inline prefix(tw) doesn't work on Sass)

You may also need to enable optimization by adding optimize: true to Minify the result option in your postcss.config.js:

module.exports = {
  plugins: {
    '@tailwindcss/postcss': {
      base: `${__dirname}/../..`,
      optimize: true,
    },
    autoprefixer: {},
  },
};

The base line is optional, because I need to load from parent directories too.