tailwindcss
tailwindcss copied to clipboard
Vite: Utilities are not working when importing tailwind in a `.scss` file
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>