Building Modern UI with Tailwind CSS

Tailwind CSS is a utility-first CSS framework that allows you to build custom designs without leaving your HTML.

Why Tailwind?

• No custom CSS needed: Build your entire design system using utility classes.
• Responsive by default: Easily create responsive designs with built-in breakpoints.
• Dark mode support: Built-in dark mode utilities make it easy to implement dark themes.

Getting Started

Install Tailwind CSS in your project:

npm install -D tailwindcss
npx tailwindcss init

Configure your template paths in tailwind.config.js:

module.exports = {
  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
  theme: {
    extend: {},
  },
  plugins: [],
}