Tailwind CSS

About Tailwind CSS

Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override. It works by scanning all of your HTML files, JavaScript components, and any other templates for class names, generating the corresponding styles and then writing them to a static CSS file.

Installation

npm install -D tailwindcss
npx tailwindcss init

Usage

Apply utility classes directly in your HTML: `<div class="bg-blue-500 text-white p-4">Hello</div>`

Example Code

// tailwind.config.js
module.exports = {
  content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Tags