//Terminal***********
npm install -D tailwindcss OR all at once with npm install -D tailwindcss autoprefixer
THEN
npx tailwindcss init
//Add the paths to all of your template files in your tailwind.config.js file.***********
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js,jsx}"], ....comma separated file types
theme: {
extend: {},
},
plugins: [],
}
//Add the Tailwind directives to your CSS***********
@tailwind base;
@tailwind components;
@tailwind utilities;
//Terminal - Start the Tailwind CLI build process....Per docs...Haven't used myself***********
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
//You're ready to use! If you want to use postcss, in Terminal***********
npm install -D postcss-import
//postcss.config.js file
module.exports = {
plugins: {
'postcss-import': {},
tailwindcss: {},
autoprefixer: {},
}
}
Source: https://tailwindcss.com/docs/using-with-preprocessors#using-post-css-as-your-preprocessor
xxxxxxxxxx
First 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"
xxxxxxxxxx
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
xxxxxxxxxx
# 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@^9
xxxxxxxxxx
Step 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;
xxxxxxxxxx
#if you need package.json file, run init command
npm init -y
#install tailwind
npm i tailwindcss
#if building forms also install
npm install @tailwindcss/forms
# in your src folder add "style.css" with lines below, to import tailwind styles:
@tailwind base;
@tailwind components;
@tailwind utilities;
#create a script in package.json
"scripts" : {
"build:css": "tailwind build src/style.css -o dist/style.css",
"watch:css": "npx tailwindcss -i ./src/style.css -o ./dist/style.css --watch"
}
#run the build
npm run build:css
#run watch when working
npm run watch:css
xxxxxxxxxx
The simplest and fastest way to get up and running with Tailwind CSS from scratch is with the Tailwind CLI tool.
1. Install Tailwind CSS .Install tailwindcss via npm, and create your tailwind.config.js file.
$ npm install -D tailwindcss
$ npx tailwindcss init
2. Configure your template paths
Add the paths to all of your template files in your tailwind.config.js file.
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
3. Add the Tailwind directives to your CSS
Addthe @tailwind directives for each of Tailwind’s layers to your main CSS file.
@tailwind base;
@tailwind components;
@tailwind utilities;
4. Start the Tailwind CLI build process
Run the CLI tool to scan your template files for classes and build your CSS.
$ npx tailwindcss -i ./src/input.css -o ./src/output.css --watch3
xxxxxxxxxx
install tailwindcss in react
---------------------------------------------
https://flowbite.com/docs/getting-started/react/
1.
npm install -D tailwindcss
npx tailwindcss init
2. Configure the template paths inside the tailwind.config.js =>
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
3. in ./src/index.css =>
@tailwind base;
@tailwind components;
@tailwind utilities;
xxxxxxxxxx
# using npm
npm i -D tailwind-styled-components
# using yarn
yarn add -D tailwind-styled-components