xxxxxxxxxx
npx create-react-app app_name
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
npm install @craco/craco
Rimpiazza nel package.json:
"start": "craco start",
"build": "craco build",
"test": "craco test",
Crea il file di configurazione:
// craco.config.js
module.exports = {
style: {
postcss: {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
],
},
},
}
Crea il file tailwind.config.js
npx tailwindcss-cli@latest init
Ottimizzazioni:
// tailwind.config.js
mode: "jit",
purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
Includere tailwind:
/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
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;
//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