0
624
VistasAlgunos estilos de Tailwind no funcionan en producción con Next.js
Por alguna razón, algunos estilos no parecen funcionar en la compilación de producción alojada en Netlify. Esto parece estar sucediendo solo en un solo componente. Es un contenedor ubicado en ./layout/FormLayout.tsx (no sé si eso cambia algo). Aquí está el envoltorio:
const FormLayout: React.FC<FormLayout> = ({ children, title, description }) => { return ( <div className="w-screen mt-32 flex flex-col items-center justify-center"> <div className="p-6 flex flex-col items-center justify-center"> <h2 className="text-4xl font-semibold text-blue-400"> {title} </h2> {description && ( <h6 className="mt-4 text-md font-medium">{description}</h6> )} <div className="mt-12 w-max">{children}</div> </div> </div> ) }y se usa aquí:
const Register: React.FC<RegisterProps> = () => { return ( <FormLayout title="Register" description="Register with your email."> {/* form stuff. styles do work in here */} </FormLayout> ) }Estos son algunos de los archivos de configuración:
configuración de viento de cola:
module.exports = { purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'], darkMode: 'class', theme: { extend: {}, }, variants: { extend: {}, }, plugins: [], }configuración postcss:
module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, }Aquí hay un ejemplo gráfico de lo que está sucediendo:
Para mi comando de compilación, uso next build && next export , y Netlify implementa el directorio /out .
Todo el código está aquí a través de github
7 Respuestas
Responde la pregunta0
Para cualquiera que vea esto en el futuro, simplemente agregue la ruta a cualquier carpeta nueva en la matriz de purge en la configuración de viento de cola de esta manera:
module.exports = { purge: [ "./src/**/*.{js,ts,jsx,tsx}", // Add more here ], darkMode: 'class', theme: { extend: {}, }, variants: { extend: {}, }, plugins: [], }Actualización de diciembre de 2021:
Después de TailwindCSS v.3, el archivo de configuración es ligeramente diferente. La configuración anterior sería:
module.exports = { content: [ "./src/**/*.{js,ts,jsx,tsx}", // Add extra paths here ], theme: { extend: {}, }, plugins: [], }0
en mi caso, esto estaba sucediendo porque no estaba dando la dirección correcta en la purge en tailwind.config.css
0
Tuve el mismo problema.
Cambié estos:
purge: [ "./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}", ],a estos :
purge: ["./pages/**/*.js", "./components/**/*.js"],y eso es. ¡problema resuelto! problema extraño
0
En caso de que alguien tenga problemas para no actualizar dom, cambia en consecuencia. ¡Compruebe si las importaciones y los nombres de archivo están escritos con el mismo caso!
Encabezado.js != encabezado.js
0
Esto me sucedió esporádicamente y eventualmente descubrí que si el único cambio que hice en mi sitio desde la última implementación fue en los atributos de respuesta, por ejemplo, cambiar md:w-1/4 a sm:w-1/4 , entonces el sitio implementado sería faltará la clase correspondiente a sm:w-1/4 . Agregar cualquier ruta nueva (incluso una ficticia) a la purge: [... matriz y redistribución resolvió el problema.
0
Estoy experimentando una situación similar pero no he podido hacer que funcione, he repasado todas las recomendaciones anteriores pero todavía me falta algo (probablemente muy obvio).
El resultado es el mismo, las etiquetas de viento de cola no funcionan en el navegador, no se muestran errores, simplemente no funciona (debo aclarar que soy un novato en Tailwindcss, solo lo pruebo por primera vez pero después de días no puedo hacer que funcione, así que sé amable si encuentras algo realmente tonto;)
Estos son mis archivos en caso de que alguien pueda echar un vistazo o señalar una dirección de cómo depurarlo, estaré profundamente agradecido:
estilos.css:
@tailwind base; @tailwind components; @tailwind utilities;tailwind.config.js:
module.exports = { content: [ './public/**/*.html', './src/**/*.{js,jsx,ts,tsx,vue}', // Add extra paths here ], theme: { extend: {}, }, plugins: [], }postcss.config.js
module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, }índice.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="/public/output.css" rel="stylesheet"> </head> <body> <h1 class="text-3xl font-bold underline text-red-700"> Hello from Tailwind 3 CsSS </h1> <p class = "text-9xl"> testing cds <div class="container"> <h2 class="text-3xl font-bold underline"> Lorem8 ipsum dolor sit amet consectetur adipisicing elit. Provident repudiandae fuga asperiores autem necessitatibus similique enim placeat ipsa accusamus molestiae. </h2> </div> </body> </html>0
En mi caso, era un directory que no figuraba en la propiedad de content del archivo tailwind.config.js . por lo tanto, cualquier componente que residiera en ese directorio no estaba siendo verificado por Tailwind.
Mi nuevo componente estaba en una carpeta llamada providers y no figuraba en content .
así que después de cambiar la lista de content a:
content: [ // ... "./components/**/*.{js,ts,jsx,tsx}", "./providers/**/*.{js,ts,jsx,tsx}", // the key was this line ] El directorio providers también estaba siendo revisado por viento de cola. Por lo tanto, cualquier directorio que consista en un componente que use clases de utilidad de viento de cola debe incluirse en esta lista.