Vite: Utilities are not working when importing tailwind in a `.scss` file

[Matheun]

tailwind v4.0.0.23

Basically, tailwind utilities work fine when importing it using a css file, but the wont work when importing it in a scss file

my package.json

{
    "name": "ui-layer",
    "type": "module",
    "version": "0.0.1",
    "main": "./nuxt.config.ts",
    "scripts": {
        "dev": "nuxi dev --host 127.0.0.1",
        "build": "nuxt build",
        "generate": "nuxt generate",
        "preview": "nuxt preview",
        "lint": "eslint .",
        "lint:fix": "eslint . --fix",
        "postinstall": "nuxt prepare"
    },
    "dependencies": {
        "@antfu/eslint-config": "^2.22.4",
        "@tailwindcss/vite": "^4.0.0-alpha.23",
        "@vueuse/core": "^10.11.0",
        "@vueuse/nuxt": "^10.11.0",
        "tailwind-merge": "^2.4.0",
        "tailwindcss": "^4.0.0-alpha.23"
    },
    "devDependencies": {
        "@iconify-json/ph": "^1.1.13",
        "@nuxt/eslint": "^0.3.13",
        "@nuxt/eslint-config": "^0.3.13",
        "@nuxt/icon": "^1.1.1",
        "@types/node": "^20.14.11",
        "eslint": "^9.7.0",
        "eslint-plugin-format": "^0.1.2",
        "eslint-plugin-tailwindcss": "^3.17.4",
        "nuxt": "^3.12.3",
        "postcss-custom-media": "^10.0.8",
        "sass": "^1.77.8",
        "typescript": "^5.5.5",
        "vue": "latest"
    }
}

my nuxt.config.ts

import tailwindcss from "@tailwindcss/vite";

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
    devtools: { enabled: true },

    typescript: {
        includeWorkspace: true,
    },

    modules: [
        "@nuxt/eslint",
        "@nuxt/icon",
        "@vueuse/nuxt",
    ],

    css: ["./assets/styles/tailwind.scss"],

    vite: {
        plugins: [
            tailwindcss(),
        ],
    },

    eslint: {
        config: {
            standalone: false,
        },
    },
});

my /assets/styles/tailwind.scss

@import "tailwindcss";

my app.vue

<template>
        <p class="pt-4">
            Test paragraph
        </p>
</template>

[philipp-spiess]

@Matheun Thanks for the report! Yeah the current version of the Tailwind CSS Vite plugin does not support other pre-processors like SCSS as Tailwind CSS itself is hooked in a pre-processor. I'll look into options of how to make this work though, but it's likely that enabling out-of-the-box support for SCSS requires jumping through some hoops.

~~I’m curious to hear about the use case though? is it possible for you to put the Tailwind CSS root into a separate CSS file then your (global?) SCSS files?~~ You can read up on the use case here: https://github.com/tailwindlabs/tailwindcss/issues/14020#issuecomment-2334262959

As a work around, though, I believe you should be able to use the @tailwindcss/postcss plugin with Vite and run it after the SCSS transform?

[Matheun]

@philipp-spiess So what im trying to do is to create the following folder structure

 scss/
 |– base/
 |   `– _global.scss
 |– tools/
 |   `– _absolute.scss // bases of veutify scss helpers etc.
 |– plugins/
 |   |– formkit/
 |   |   `– _input.scss
 |   `– postcss/
 |       `– _custom-media.scss
 `– theme/
     |– _blurs.scss
     |– _icons.scss
     |– _radii.scss
     |– _spacing.scss
     |– _widths.scss
     |– _typography.scss
     `– _....scss

I want to use it this way since at our company we got 2 parties, 1 that hates tailwind classes and the other that hates regular css. To bridge the gap between them, im creating a nuxt template for us that has regular scss config and tools along side tailwindcss.

This way i can maintain the template and keep both parties working along side, since neither is willing to give in :)

"As a work around, though, I believe you should be able to use the @tailwindcss/postcss plugin with Vite and run it after the SCSS transform?" How would i do this? since i tried using the postcss varient but i kept getting weird import errors or either breaking the hmr

[philipp-spiess]

How would i do this? since i tried using the postcss varient but i kept getting weird import errors or either breaking the hmr

Here's what I tried: I added the following postcss.config.js to a Vite project and removed the @tailwindcss/vite plugin:

module.exports = {
  parser: 'postcss-scss',
  plugins: {
    '@tailwindcss/postcss': {},
  },
}

[Matheun]

Awesome, this works wonders.

[Matheun]

Are you using nuxt?

[Matheun]

ah, your currectly commenting on a tailwind v4 issue, your working with v3.4

[Matheun]

Fun fact, you actually need to install sass 😉

[Matheun]

@ultimateshadsform If you open a new issue, i'll try and help you out there, since this issue isnt about your problem

[adampatterson]

I'm using Vite + SASS in a Laravel app. Other team members used @imports that worked fine until a recent composer package update.

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

Using @tailwind fixes the issue regardless of any Node package updates.

@tailwind base;
@tailwind components;
@tailwind utilities;

[adampatterson]

Using @import is old and deprecated syntax. Use @use instead.

https://sass-lang.com/blog/import-is-deprecated/

You're correct, and thanks for the flag!

I did start down the road of updating my SASS files with @use but if I remember correctly it requires you to move all of the @use rules at the top of the file which isn't exactly a quick change when styles previously cascaded meaning a @import footer may be overwriting something previously declared.

In my case, it'll take a bit more time to upgrade.

[RobinMalfait]

Hey!

Right now Tailwind CSS v4 doesn't support scss/sass or less (more info: https://tailwindcss.com/docs/compatibility#sass-less-and-stylus), I would recommend to see if you can just use normal CSS files.

Another thing you can try is to pre-process the scss files, and later pass it to Tailwind CSS.

Right now we don't have any plans to support scss/sass or less files.

[danon]

If we can build our styles with scss, we get to treat tailwind as an implementation detail, give ourself options to change it later, migrate, or split into two.

Tailwind suggests we should couple our projects to the framework - by doing that we shoot ourselves in our feet because - to get rid of it in the future will be impossible.

Scss can give us a protection layer, a way to decouple our projects from tailwind.

[lior-amsalem]

fml. my project is on sass and i can't use tailwind now - any plans?

[LordSimal]

fml. my project is on sass and i can't use tailwind now - any plans?

generate 2 css files. One with tailwind.css and one with old_style.css