Tailwind 4 @reference '#tailwindcss' doesn't work when style is <style lang='postcss'>
Nadie ha tomado este issue todavía.
Evaluación
- Dificultad
- 4/5
- Tiempo estimado
- 3-5 días
- Aptitud para principiantes
- 42/100
- Tipo de issue
- Error
- Claridad
- Bastante claro
- Estado de actividad
- Estancado
- Stack tecnológico
- css, nuxt, tailwind, typescript
- Área
- build-system, frontend
Línea de trabajo
Start with nuxt.config.ts and reproduce the issue in a Vue component using the shown scoped lang="postcss" style block. Compare resolution of @reference '#tailwindcss' with the package.json #importtailwindcss workaround, and verify the fix in production mode; done means nested PostCSS and @apply work without the workaround.
Escrito por el modelo de indexación a partir del texto del issue.
Descripción
Versions:
"@nuxtjs/tailwindcss": "^7.0.0-beta.0",
"nuxt": "^3.17.5"
nuxt.config.ts
{
postcss: {
plugins: {
"@tailwindcss/postcss": {
optimize: false // also I need to set optimize to false in order to work on production mode
},
"postcss-nested": {},
}
}
}
When the style is set to the following (postcss), then it throws errors or does nothing
<style lang='postcss' scoped>
@reference '#tailwindcss';
.ct-base__item{
@apply flex;
&--red{
@apply text-red-500;
}
}
</style>
The workaround I found is to set the following in package.json
"imports": {
"#importtailwindcss": "./app/assets/css/tailwind.css"
}
Then in Vue file, I can use @reference '#importtailwindcss' to make it work again.
<style lang='postcss' scoped>
@reference '#importtailwindcss';
.ct-base__item{
@apply flex;
&--red{
@apply text-red-500;
}
}
</style>
Or not using PostCSS also works but I cannot use nested feature
<style lang='css' scoped>
@reference '#tailwindcss';
.ct-base__item{
@apply flex;
}
.ct-base__item--red{
@apply text-red-500;
}
</style>
Anyone else having the same issue?
also to make postcss work on production see this thread
- Lenguaje dominante
- TypeScript
- Estrellas
- 1.9k
- Forks
- 192
- Métricas de merge de PR
- Sin PR fusionados en 30 d
Preparar el entorno
Este proyecto no incluye contenedor de desarrollo, Dockerfile ni guía de contribución, así que la configuración corre por tu cuenta: empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.
Primeros pasos
- Lee el issue completo y luego la guía de contribución del proyecto.
- Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
- Haz un fork del repositorio y trabaja en una rama.
- Abre un pull request que haga referencia al número del issue.
Más de nuxt-modules/tailwindcss
-
Version 6Abiertobug
Dificultad 4/5 3-5 días Aptitud para principiantes 35/100
nuxt-modules/tailwindcss#1042 ·
-
bug
Dificultad 3/5 1-2 días Aptitud para principiantes 35/100
nuxt-modules/tailwindcss#1039 · 2 comentarios ·
-
bug
Dificultad 3/5 1-2 días Aptitud para principiantes 45/100
nuxt-modules/tailwindcss#1034 · 1 comentario ·
-
post css problem i guessAbiertobug
Dificultad 3/5 1-2 días Aptitud para principiantes 35/100
nuxt-modules/tailwindcss#1033 · 1 comentario ·
-
question
Dificultad 3/5 1-2 días Aptitud para principiantes 30/100
nuxt-modules/tailwindcss#1031 · 7 comentarios ·
Todos los issues de nuxt-modules/tailwindcss
Issues similares
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 88/100
callstackincubator/rozenite#518 ·
Los mantenedores suelen responder en 1 día
-
Area/Workflow Priority/Blocker Type/Bug
Dificultad 2/5 1-3 horas Aptitud para principiantes 76/100
wso2/product-integrator#2622 ·
Los mantenedores suelen responder en 1 día
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 68/100
-
area:bash bug has repro platform:macos
Dificultad 2/5 1-3 horas Aptitud para principiantes 78/100
anthropics/claude-code#98644 ·
Los mantenedores suelen responder en 1 día
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 78/100
allure-framework/allure-js#1603 ·
Los mantenedores suelen responder en 1 día