Rayied991 / CSS-Tailwind

CSS-Tailwind-Utility First Classes

Source

Why Use Tailwind CSS

• No reinventing of class names required
• CSS doesn't grow with your html and designs
• When you make a change , no risk of breaking existing templates!
• Will this makes sites slow? -> No!
• Responsiveness!

Commands For CSS-Tailwind Setup for Development

1. npm init
2. npm install -D tailwindcss postcss autoprefixer
3. npm install vite[ server start which automatically refreshes]
4. npx tailwindcss init

Commands For CSS-Tailwind Setup for Production

To Setup tailwind css Run-

• npm init-y //This initializes the directory as a nodejs Project
• npm install-D Tailwind postcss autoprefixer vite //installs required packages
• npx tailwindcss init -p
• Create a css file "input.css", add it to your html and edit this contents:
  @tailwind base;
  @tailwind components;
  @tailwind utilities;
  
• In your tailwind .config.js file replace content:[], with content:["*"],
• Add "start:""vite" to your scripts in Package.json
• Run npm run start command to start a dev server

config file add "*" /** @type {import('tailwindcss').Config} / module.exports = { content: [""], theme: { extend: {}, }, plugins: [], }

//change package.json { "name": "css-tailwind", "version": "1.0.0", "description": "<a href="https://tailwindcss.com/docs/installation/using-postcss\">Source", "main": "index.js", "scripts": { "start": "vite" }, "author": "", "license": "ISC", "devDependencies": { "autoprefixer": "^10.4.14", "postcss": "^8.4.23", "tailwindcss": "^3.3.2" }, "dependencies": { "vite": "^4.3.8" } }