Tailwind-CSS-Dienstprogramme werden nach der ersten Erstellung der React.js-App nicht aktualisiertCSS

CSS verstehen
Anonymous
 Tailwind-CSS-Dienstprogramme werden nach der ersten Erstellung der React.js-App nicht aktualisiert

Post by Anonymous »

Ich habe heute beschlossen, in den sauren Apfel zu beißen und für meine React-App ein Upgrade von Tailwind v2 auf v3 durchzuführen. Das Upgrade verlief gut, aber ich habe jetzt ein Problem, bei dem nach dem Ausführen von npm start das Hinzufügen zusätzlicher Tailwind-CSS-Dienstprogramme in der Entwicklung nicht berücksichtigt wird, wenn die App neu kompiliert wird, was meiner Meinung nach die Aufgabe der JIT-Engine ist.
Ich hatte erwartet, dass Tailwind CSS Änderungen erkennt und die gewünschten Klassen hinzufügt/entfernt. Ich habe versucht, die Basisklasse von basis-1/2 in basis-3/4 zu ändern, aber da ich die Klasse basis-2/5 nicht in den ersten Build eingebunden hatte, war der Klassenname nach einem Hot-Reload auf dem vorhanden, aber die Klasse wurde nicht in das Stylesheet geladen.
Ich weiß, dass dies ein Rückenwind-spezifisches Problem ist, da ich mit Chrome-Tools nachgeforscht habe und der Klassenname dem Div hinzugefügt wurde, der Wert jedoch nicht im neu kompilierten Stylesheet:
Ziel-CSS-Klasse
Ich dachte, die Lösung könnte darin bestehen, alle CSS-Klassen während der Entwicklung einzubeziehen und sie einmal in der Produktion zu löschen, aber aufgrund von Recherchen denke ich, dass die Tailwind-CSS-Bundles zu groß geworden sind, um in der Entwicklung vollständig geladen zu werden.
Ich habe auch versucht, verschiedene Dateipfade im Inhaltsarray in der Datei tailwind.config.js abzugleichen, aber das hat nicht geholfen entweder.
tailwind.config.js

Code: Select all

module.exports = {
content: ['./src/**/*.{js,jsx,ts,tsx}', './src/**/**/*.{js,jsx,ts,tsx}'],
theme: {
extend: {},
},
plugins: [require('@tailwindcss/forms')],
};
index.js

Code: Select all

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { Provider } from 'react-redux';
import store from './redux/store';
import { history } from './_helpers/history';
import 'react-loader-spinner/dist/loader/css/react-spinner-loader.css';
import './assets/main.css';

const rootElement = document.getElementById('root');

ReactDOM.render(




,
rootElement,
);

registerServiceWorker();
postcss.config.js

Code: Select all

const tailwindcss = require('tailwindcss');
module.exports = {
plugins: [tailwindcss('./src/tailwind.config.js'), require('autoprefixer')],
};
assets/tailwind.css

Code: Select all

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
package.json

Code: Select all

{
"name": "personalreactapp",
"version": "0.1.0",
"private": true,
"proxy": "http://localhost:5000/",
"dependencies": {
"@emotion/react": "^11.6.0",
"@emotion/styled": "^11.6.0",
"@headlessui/react": "^1.4.2",
"@heroicons/react": "^1.0.5",
"@mui/icons-material": "^5.1.1",
"@mui/material": "^5.1.0",
"@mui/styles": "^5.1.0",
"@tailwindcss/forms": "^0.4.0",
"@types/js-cookie": "^3.0.1",
"axios": "^0.21.4",
"formik": "^2.2.9",
"highcharts": "^9.1.1",
"highcharts-react-official": "^3.0.0",
"history": "^5.2.0",
"jquery": "^3.6.0",
"js-cookie": "^3.0.1",
"merge": "^1.2.1",
"oidc-client": "^1.9.0",
"query-string": "^7.1.1",
"react": "^17.0.2",
"react-dom": "^16.0.0",
"react-hot-toast": "^2.2.0",
"react-loader-spinner": "^4.0.0",
"react-redux": "^7.2.6",
"react-router": "^6.2.1",
"react-router-bootstrap": "^0.25.0",
"react-router-dom": "^6.0.2",
"react-scripts": "5.0.0",
"react-toastify": "^8.1.0",
"reactstrap": "^8.4.1",
"redux-devtools-extension": "^2.13.9",
"redux-logger": "^3.0.6",
"redux-persist": "^6.0.0",
"redux-thunk": "^2.3.0",
"reselect": "^4.1.2",
"rimraf": "^2.6.2",
"styled-components":  "^4.3.2",
"watch": "^1.0.2",
"yup": "^0.32.11"
},
"devDependencies": {
"@tailwindcss/postcss7-compat": "^2.2.17",
"ajv": "^6.9.1",
"autoprefixer": "^10.4.2",
"babel-eslint": "^10.1.0",
"cross-env": "^5.2.0",
"eslint": "^6.8.0",
"eslint-config-airbnb": "^19.0.0",
"eslint-config-prettier": "^8.3.0",
"eslint-config-react-app": "^5.2.0",
"eslint-plugin-flowtype": "^4.6.0",
"eslint-plugin-import": "^2.25.3",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-only-warn": "^1.0.3",
"eslint-plugin-react": "^7.27.0",
"nan": "^2.14.1",
"postcss": "^8.4.6",
"postcss-cli": "^9.0.2",
"prettier": "^2.4.1",
"pretty-quick": "^3.1.1",
"tailwindcss": "^3.0.23",
"typescript": "^3.9.10"
},
"eslintConfig": {
"extends": "react-app"
},
"scripts": {
"start": "rimraf ./build && npm run watch:css && react-scripts start",
"build": "npm run watch:css && react-scripts build",
"build:css": "postcss src/assets/tailwind.css -o src/assets/main.css",
"watch:css": "postcss src/assets/tailwind.css -o src/assets/main.css",
"test": "cross-env CI=true react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"lint": "eslint ./src/ --max-warnings=0"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

Quick Reply

Change Text Case: 
   
  • Similar Topics
    Replies
    Views
    Last post