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: #14020 (comment)

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.

[ultimateshadsform]

Is there any new changes? I used to have the exact same setup for months and now it's suddenly not working anymore?

node:internal/process/promises:391
    triggerUncaughtException(err, true /* fromPromise */);
    ^

[Failed to load PostCSS config: Failed to load PostCSS config (searchPath: C:/Users/shadow/Desktop/Coding/neocities): [Error] Loading PostCSS Plugin 
failed: Cannot find module '@alloc/quick-lru'
Require stack:
- C:\Users\shadow\Desktop\Coding\neocities\node_modules\tailwindcss\lib\lib\setupTrackingContext.js
- C:\Users\shadow\Desktop\Coding\neocities\node_modules\tailwindcss\lib\plugin.js
- C:\Users\shadow\Desktop\Coding\neocities\node_modules\tailwindcss\lib\index.js
- C:\Users\shadow\Desktop\Coding\neocities\postcss.config.js

(@C:\Users\shadow\Desktop\Coding\neocities\postcss.config.js)
Error: Loading PostCSS Plugin failed: Cannot find module '@alloc/quick-lru'
Require stack:
- C:\Users\shadow\Desktop\Coding\neocities\node_modules\tailwindcss\lib\lib\setupTrackingContext.js
- C:\Users\shadow\Desktop\Coding\neocities\node_modules\tailwindcss\lib\plugin.js
- C:\Users\shadow\Desktop\Coding\neocities\node_modules\tailwindcss\lib\index.js
- C:\Users\shadow\Desktop\Coding\neocities\postcss.config.js

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

[Matheun]

Are you using nuxt?

[ultimateshadsform]

Are you using nuxt?

No just regular Vue 3 using this guide: https://tailwindcss.com/docs/guides/vite#vue

And just installing sass-embedded package to enable scss.

[ultimateshadsform]

My stuff:

{
  "name": "neocities",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc -b && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.5.4",
    "vue-router": "^4.4.3"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.1.3",
    "autoprefixer": "^10.4.20",
    "postcss": "^8.4.45",
    "sass-embedded": "^1.78.0",
    "tailwindcss": "^3.4.10",
    "typescript": "^5.6.2",
    "vite": "^5.4.3",
    "vue-tsc": "^2.1.6"
  }
}

Main.ts

import '@/scss/main.scss';

main.scss

@use './tw.scss';

tw.scss

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

[ultimateshadsform]

EDIT: The new postcss package is broken. I downgraded the package to use "postcss": "8.4.40",

Any higher version makes it break.

[Matheun]

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

[ultimateshadsform]

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

Yeah. But if any luck you could try switching from scss to sass-embedded package to see if that fixes anything? Idk just a thought.

[Matheun]

Fun fact, you actually need to install sass 😉

[ultimateshadsform]

Fun fact, you actually need to install sass 😉

Actually Nuxt suguessted to install sass-embedded. sass and sass-embedded are two different packages. sass is js based and sass-embessed is dart based.

[Matheun]

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