Tailwindcss install with JIT mode
install tailwindcss by postcss with auto prefixer
npm install -D tailwindcss postcss autoprefixer
creat tailwincs config file
creat postcss config file
use this code in packege.json file for build
creat a public folder and creata index.html file and a style.css file
then creat a src folder and on there creat a tailwind.css file
add this in your tailwind.css file
(note: you can name it whatever you want and creat or creat all file where where you want)
@tailwind base;
@tailwind components;
@tailwind utilities;
use this code on your scripts tag on your package.json file ( on scripts tag)
"build": " npx tailwindcss -i ./src/tailwind.css -o ./public/style.css -w",
"build-p": "postcss ./src/tailwind.css -o ./public/style.css -w"use this code in tailwind.config.js file for JIT MODE
module.exports = {
mode: "jit",
content: ["./public/**/*.html"],
theme: {
extend: {},
},
plugins: [],
};creat .vscode folder and in there creat settings.json file , add this in that file
this for tailwindcss auto complate and it's not gonna show error
{
"css.validate": false,
"tailwindCSS.emmetCompletions": true
}
Run taliwindcss by post css
Automatic Class Sorting with Prettier
install prettier Extension from VS Code Marketplace and install in your project using CLI commands
npm install --save-dev prettier-plugin-tailwind-css
yarn add -D prettier-plugin-tailwind-css
Using prettier with tailwind in your workspace
Create a file in this name
use this command to run pretteir in your project ( for all file use a dot . or use your file name )
Add "removeDuplicatesClasses" in json file to remove duplicate class
"removeDuplicatesClasses" : true,
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent