Empecé un proyecto con vite + react + mecanografiado e instalé tailwind. Todo funcionaba sin problemas hasta que creé una subcarpeta en /src y agregué los estilos en archivos dentro de la subcarpeta. El modo de construcción automática o de vigilancia para el viento de cola dejó de funcionar.
Por ejemplo, cuando los estilos estaban en /src/App.tsx, todo funciona bien, pero si agrego estilos en /src/components/Header.tsx e importo ese componente en App.tsx, el archivo Tailwind CSS no se crea automáticamente.
Reiniciar el servidor aplica los nuevos estilos correctamente.
Así es como se ven mis archivos:
tailwind.config.js
module.exports = { content: ["./index.html", "./src/**/*.{html,ts,tsx}", "./src/*.{ts,tsx}"], theme: { borderColor: { black: "#000", }, borderWidth: { 1: 1, }, extend: { colors: { custom1: "#F5A", }, }, }, plugins: [], };postcss.config.js
module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, }src/Aplicación.tsx
import "./index.css"; import Users from "./components/Users"; import Header from "./layout/header"; function App() { return ( <div> <Header /> <Users /> </div> ); } export default App;src/layout/Header.tsx
import React from "react"; function Header() { return ( <div className="bg-custom1"> <h1 className="text-5xl p-6">Welcome to my app!</h1> <nav> <ul> <li> <a href="/addUser">Add User</a> </li> <li> <a href="/addUser">Users</a> </li> </ul> </nav> </div> ); } export default Header;Intente volver a la documentación, debería funcionar correctamente si su configuración es la misma que en la documentación.
Este es el viento de cola de la documentación con CRA: https://tailwindcss.com/docs/guides/create-react-app
Resulta que originalmente creé el archivo header.tsx e inmediatamente lo cambié a Header.tsx, luego lo importé en App.tsx pero el autocompletado lo importó incorrectamente.
import Header from "./layout/header";Lo interesante es que el componente se importó correctamente cuando se inició el servidor pero no se actualizó en tiempo real.
Esa era la línea que me estaba causando problemas no solo con css sino también con cualquier cambio que hice en el archivo ya que la importación estaba mal. debería haber sido
import Header from "./layout/Header";¡Buenas noches a todos!