CSS CSS NPM
# Using npm
npm install tailwindcss
# Using Yarn
yarn add tailwindcss
Combative Capuchin
# Using npm
npm install tailwindcss
# Using Yarn
yarn add tailwindcssFirst add tailwind and postcss
npm install tailwindcss postcss autoprefixer postcss-cli
Initialize tailwindcss
npx tailwindcss init
Create a "postcss.config.js" and paste the following in it
module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
]
}
Create the necessary files
mkdir public
mkdir public/styles
touch public/styles/tailwind.css
touch public/styles/style.css
Paste the following in public/styles/tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;
The last thing is to add this to the scripts in package.json
"tailwind:css": "postcss public/styles/tailwind.css -o public/styles/style.css"# If you're on Next.js v10
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
# Or
yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest
# If you're on Next.js v9 or older
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9Step 1:
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
Step 2:
npm install @craco/craco
Step 3:
package.json:
{
// ...
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject"
},
}
Step 4:
create craco.config.js at root
craco.config.js:
module.exports = {
style: {
postcss: {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
],
},
},
}
Step 5:
npx tailwindcss-cli@latest init
Step 6:
// tailwind.config.js at root
module.exports = {
purge: [],
purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
Step 7:
/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;npm install -D tailwindcss postcss autoprefixer
npx tailwindcss initnpm install tailwindcss --save-dev