I created a simple test react app and followed all of the steps from the official tailwind website: "https://v2.tailwindcss.com/docs/guides/create-react-app". Here are the relevant files:
SampleComponent.js:
import React from 'react';
const SampleComponent = () => {
return (
<div className="bg-blue-500 p-4">
<h1 className="text-white font-bold">This is a sample component using Tailwind CSS</h1>
</div>
);
};
export default SampleComponent;
App.js:
import React from 'react';
import SampleComponent from './SampleComponent';
function App() {
return (
<div className="bg-gray-200 min-h-screen">
<SampleComponent />
</div>
);
}
export default App;
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
index.css:
@tailwind base;
@tailwind components;
@tailwind utilities;
craco.config.js:
module.exports = {
style: {
postcss: {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
],
},
},
}
tailwind.config.js:
module.exports = {
purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
package.json:
{
"name": "my-project",
"version": "0.1.0",
"private": true,
"dependencies": {
"@craco/craco": "^7.1.0",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "^5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"autoprefixer": "^9.8.8",
"postcss": "^8.4.27",
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17"
}
}
Here is a screenshot of inspecting the element:
(https://phpout.com/wp-content/uploads/2023/07/D2wJi.png)
However, every time I try running npm run start
, the Tailwind CSS is not being displayed.
I tried other possible solutions I found, such as running npm install react-scripts@latest
and npm install postcss@latest
as well as deleting npm_modules
and package-lock.json
and rerunning npm install
, but to no avail.
2
Answers
try adding
content: [‘./src/**/*.{js,jsx,ts,tsx}’],
in tailwind.config.js
The documentation may be for an older version of
react-scripts
/create-react-app
. Consider removing thestyle.postcss.plugins
key fromcraco.config.js
or indeed removing@craco/craco
altogether, since v5 ofreact-scripts
/create-react-app
supports Tailwind out of the box.See your project working in CodeSandbox.
As an aside, Tailwind recommends more modern build systems: