CSS

how to install tailwind css in html

    
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
    

install tailwind css

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

tailwind css installation

   				  /*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

installation tailwind css in html

npx tailwindcss -i style.css -o tailwind.css

tailwindcss install

npm install tailwindcss --save-dev

tailwind installation

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;