Tailwind CSS Setup using CLI.md

1. node.js required
2. npm init -y (initialize node project)
3. install Tailwind CSS Intellisense VS Code Plugin
4. npx tailwindcss init (create configure files for tailwind)
5. create src/input.css or any name

@tailwind base;
@tailwind components;
@tailwind utilities;

6. create .vscode/settings.json file [Optional]

{
"css.validate": false,
"tailwindCSS.emmetCompletions": true
}

7. add the paths inside tailwind.config.js

/** @type {import('tailwindcss').Config} */ 
module.exports = {
  content: ["./src/**/*.{html,js}"], // where actually tailwindcss looking for used class and purge
  theme: {
    extend: {},
  },
  plugins: [],
}

8. insert build script

"scripts": 
{
"build": "tailwindcss -i ./src/input.css -o ./output.css --watch"
}
// input path | outputh path | watch flag => auto rebuild after changes

9. create src/index.html and link /dist/output.css

<link href="/dist/output.css" rel="stylesheet">

10. npm run build (this command do not required for react app)
11. Automatic Class Sorting with Prettier

• install
  • npm install -D prettier prettier-plugin-tailwindcss
• enable format on save
• npx prettier --check . // check all files
• npx prettier --write . // formate all files

Note

• before v3 CDN cannot customizable
• install as PostCSS Plugin is not recommanded for beginner