Tailwind CSS NPM
# Using npm
npm install tailwindcss
# Using Yarn
yarn add tailwindcss
Combative Capuchin
# Using npm
npm install tailwindcss
# Using Yarn
yarn add tailwindcss
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init /*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-configurationnpx 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;npx tailwindcss -i style.css -o tailwind.css