What is Tailwind CSS and how does it differ from traditional CSS frameworks? - 面试题

Tailwind CSS is a utility-first CSS framework that provides a large number of predefined class names, allowing developers to quickly build user interfaces. Unlike traditional CSS frameworks (such as Bootstrap), Tailwind CSS does not provide pre-built components, but provides low-level utility classes that allow developers to freely combine these classes to create unique designs.

Core advantages of Tailwind CSS:

Fast development: no need to write custom CSS, directly use predefined classes
Highly customizable: completely customize the design system through configuration files
Responsive design: built-in responsive prefixes (sm, md, lg, xl, 2xl)
Dark mode: built-in dark mode support
Small size: automatically remove unused styles through PurgeCSS
Consistency: enforce the use of unified design tokens

Installation and configuration:

Install via npm: npm install -D tailwindcss
Initialize configuration: npx tailwindcss init
Configuration file: tailwind.config.js
Import in CSS: @tailwind base; @tailwind components; @tailwind utilities;

Common class name examples:

Spacing: p-4 (padding), m-2 (margin), mt-4 (margin-top)
Colors: bg-blue-500 (background color), text-white (text color)
Layout: flex, grid, block, inline-block
Sizes: w-full (width 100%), h-screen (height 100vh)
Typography: text-xl, font-bold, leading-relaxed
Borders: border-2, rounded-lg, shadow-md

Responsive design:

Breakpoints: sm (640px), md (768px), lg (1024px), xl (1280px), 2xl (1536px)
Example: md:w-1/2 (width 50% on medium screens and above)

Configuration file example:

javascript
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {
      colors: {
        primary: '#3b82f6',
      },
    },
  },
  plugins: [],
}

Best practices:

Use @apply to extract repeated classes
Reasonably use configuration files to customize the design system
Use JIT mode to improve performance
Use plugins to extend functionality
Keep HTML structure clear