tailwindcss icon indicating copy to clipboard operation
tailwindcss copied to clipboard

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

Open Matheun opened this issue 5 months ago • 17 comments

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>

Matheun avatar Sep 10 '24 09:09 Matheun