xxxxxxxxxx
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
xxxxxxxxxx
/*Follow the commands for Tailwind CLI*/
1. Initialize a node project in your directory:
npm init -y
2. Install tailwindcss as a devDependency:
npm i -D tailwindcss
3. Install vs code plugin: Tailwind CSS IntelliSense (not for terminal)
4. Create a configuration file for tailwindcss:
npx tailwindcss init
5. Create src and output folder in root.
6. In src folder create a file named tailwind.css / (anyname).css
7. In src/tailwind.css write these :
@tailwind base;
@tailwind components;
@tailwind utilities
8. Create a folder named .vscode and ini this folder create a file
named settings.json.
9. And paste this:
{
"css.validate": false,
"tailwindCSS.emmetCompletions": true
}
this setting will help to not get erron after writing css
10. In scritps property in package.json file write a build property:
"scripts":
"build": "tailwindcss -i ./src/tailwind.css -o ./output/tailwind.css -w"
11. Link tailwind in HTML like this href="./output/tailwind.css"
12. Now build tailwind:
npm run build
13. Now you just have on task to complete which is content configuration:
See the configuration from here:
https://tailwindcss.com/docs/content-configuration
xxxxxxxxxx
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
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
#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
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
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;
//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
# using npm
npm i -D tailwind-styled-components
# using yarn
yarn add -D tailwind-styled-components