Setting up Tailwind with create-react-app. After setting up your CRA Project:
npm install tailwindcss
npm install -D @craco/cracoThen add it to your PostCSS config (use a separate postcss.config.js file):
module.exports = {
plugins: [
require("tailwindcss"),
require("postcss-flexbugs-fixes"),
require("postcss-preset-env")({
autoprefixer: {
flexbox: "no-2009"
},
stage: 3,
features: {
"nesting-rules": true
}
})
]
};Create a file for your craco configuration (craco.config.js):
const { POSTCSS_MODES } = require("@craco/craco");
module.exports = {
style: {
postcss: {
mode: POSTCSS_MODES.file
}
}
};Change your scripts in your package.json:
"scripts": {
- "start": "react-scripts start",
+ "start": "craco start",
- "build": "react-scripts build",
+ "build": "craco build"
- "test": "react-scripts test",
+ "test": "craco test"
}Next, add the following in your src/index.css file for your Tailwind styles.
@tailwind base;
@tailwind components;
@tailwind utilities;npm install
npm run start
npm run build
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent