0
101
VistasLa clase Tailwind no funciona después de la instalación
Intento usar CSS, solo instalo tailwindcss con npm, y luego construyo el css y proporciono el archivo output.css. Pero, cuando uso el botón de entrada de clase bg-black para probar, todavía no funciona.
comando de compilación que uso tailwindcss -i ./src/style.css -o ./dist/output.css lo puse en el script en package.json
Ruta del archivo del directorio:
en src/style.css
@tailwind base; @tailwind components; @tailwind utilities; en tailwind.config.js
theme: { extend: { // ... }, }, plugins: [], } en dist/index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="output.css"> <title>Learn Tailwind</title> </head> <body> <div class="container"> <button class="bg-black">Awesome</button> </div> </body> </html>El HTML en el resultado del navegador:
3 Respuestas
Responde la pregunta0
Veo que está usando el comando de compilación y lo puso en su package.json , eso es correcto. ¿Pero ejecutó npm run build entonces?
0
Tuve el mismo problema. tiene que ver con su tailwind.config.js Asegúrese de tener la lista de contenido apuntando a sus archivos html que usan tailwind. (vea el código a continuación para ver todos los archivos con html en un nivel inferior)
Luego ejecuta el comando:
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
Asegúrese de no recibir ningún mensaje de advertencia sobre rutas no válidas.
module.exports = { content: ['./*/*.html', ], theme: { extend: {}, }, plugins: [], }0
Veo que importa "output.css" en su código, pero necesariamente necesita importar su archivo css de viento de cola. Ex:
<link rel="stylesheet" href="src/style.css">Ver documento: https://tailwindcss.com/docs/installation