How to Manually Add TailwindCss in Ubuntu

✅ Step-by-Step: Manual Tailwind + PostCSS Setup 1. Install required packages Run this in your project root: bash Copy Edit npm install -D tailwindcss postcss autoprefixer 2. Create Tailwind config manually Create a file named tailwind.config.js: bash Copy Edit touch tailwind.config.js Add this content: js Copy Edit /** @type {import('tailwindcss').Config} */ module.exports = { content: ["./src/**/*.{html,js,jsx,ts,tsx}"], theme: { extend: {}, }, plugins: [], } 3. Create PostCSS config manually Create a file named postcss.config.js: bash Copy Edit touch postcss.config.js Add this content: js Copy Edit module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, } 4. Create your CSS entry file Example: src/index.css css Copy Edit @tailwind base; @tailwind components; @tailwind utilities; 5. Ensure your build tool is configured If you're using Vite, Webpack, or Parcel, they’ll automatically pick up PostCSS if config files exist. For Vite (vite.config.js), you don’t need to manually add anything. 6. Import your CSS in your app In your main entry file (e.g. main.jsx or index.js): js Copy Edit import './index.css'; ✅ Done! You’re now using Tailwind CSS manually with PostCSS.