SYNO-SY / TailwindCSS

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Tailwindcss boilerplate

  • Installing Tailwind CSS as a PostCSS plugin is the most seamless way to integrate it with build tools like webpack, Rollup, Vite, and Parcel.

Required

STEP - 01

Install Tailwind CSS

  • Install tailwindcss and its peer dependencies via npm, and create your tailwind.config.js file.

  • npx init -y

  • npm install -D tailwindcss postcss autoprefixer

  • npx tailwindcss init

STEP - 02

  1. Add Tailwind to your PostCSS configuration
  2. Add tailwindcss and autoprefixer to your postcss.config.js file, or wherever PostCSS is configured in your project.
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

STEP - 03

Configure your template paths

  • Add the paths to all of your template files in your tailwind.config.js file.
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["*"],
  theme: {
    extend: {},
  },
  plugins: [],
};

STEP - 04

Add the Tailwind directives to your CSS

  • Add the @tailwind directives for each of Tailwind’s layers to your main CSS file.
@tailwind base;
@tailwind components;
@tailwind utilities;

STEP - 05

Start your build process

  • Run your build process with npm run dev

About


Languages

Language:HTML 64.0%Language:JavaScript 28.5%Language:CSS 7.5%