Intenté configurar el JIT en create-react-app por mí mismo, pero parece que no funciona porque los estilos no se actualizan. Estoy usando craco para compilar la aplicación con tailwind css y también agregué TAILWIND mode=WATCH como sugirieron para que funcione con la mayoría de las compilaciones. Aquí están mis configuraciones:
tailwind.config.js
module.exports = { mode: "jit", purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"], darkMode: false, // or 'media' or 'class' theme: { extend: { colors: { primary: "#ffa500", secondary: { 100: "#E2E2D5", 200: "#888883", }, }, }, }, variants: { extend: { opacity: ["disabled"], }, }, plugins: [],};scripts de paquete.json
"scripts": { "start": " craco start", "build": "TAILWIND_MODE=watch craco build", "test": "craco test", "server": "nodemon ./server/server.js", "eject": "react-scripts eject" },paquete.json devDependencies
"devDependencies": { "autoprefixer": "^9.8.6", "postcss": "^7.0.36", "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.4" },Me alegraría si pudiera encontrar alguna manera de arreglar esto.
Si está en Windows (como sospecho que podría ser por su comentario sobre la respuesta de @Ako), entonces su configuración es correcta pero solo necesita instalar cross-env , luego ajuste su secuencia de comandos de inicio de esta manera:
"start": "cross-env TAILWIND_MODE=watch craco start"debe usar TAILWIND_MODE=watch en su secuencia de comandos de inicio , no compilar , y después de haber desarrollado lo que desea, construya solo con la secuencia de comandos de craco build . por lo que sus scripts de package.json deben tener este aspecto:
"scripts": { "start": "TAILWIND_MODE=watch craco start", "build": "craco build", "test": "craco test", "eject": "react-scripts eject", }, también en el accesorio de purga dentro del archivo tailwind.config.css, debe agregar './src/components/*.{js,jsx}' para que la purga se vea así:
purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html', './src/components/*.{js,jsx}'],y después de compilar su aplicación, debe servir el archivo index.html dentro de la carpeta de compilación.
clone este repositorio y después de construir el proyecto, use npm run servebuild y vea si funciona. https://github.com/ako-v/cra-tailwindcss-jit-craco
npx tailwindcss -o ./src/App.css --watch Esto asegurará que se reconstruya el archivo CSS. El siguiente paso es abrir otra terminal y hacer npm start y su servidor de desarrollo estará listo con el compilador JIT.
(nota al margen)
Además, uso tailwind con mi configuración predeterminada de package.json y también funciona sin problemas sin craco (tanto JIT / predeterminado) como en producción.