Customized TailwindCSS Boilerplate with additional features.
Step 1
npm i -D tailwindcss
Step 2
npm run build
After that run the live server or open the html page to check if it is working
npm init -y
[Initializing node project.creates package.json file]npm i -D tailwindcss
[installing tailwindcss as developer dependency.Creates node_modules and package-lock.json file]- tailwindcss intellisense vs code plugin installing
npx tailwindcss init --full
[making configuration file for tailwindcss and for its customization. --full gives all default values(use of--full
is optional)]- create src and output folder
- create a css file in the src folder
- add tailwind directives to src css file
- create .vscode/settings.json file [to write custom settings of vs code]
- add
{ "css.validate": false, "tailwindCSS.emmetCompletions":true }
- update these specific package.json file with -
"scripts": { "build":"tailwindcss -i ./src/input.css -o ./dist/output.css -w" },
- link html with output css file-
<link rel="stylesheet" href="../dist/output.css">
- update the content line of tailwind.config.js file with this -
content: ["./src/**/*.{html,js}"],
npm run build
[this will compile the input file to generate the output file and will keep watching for changes]