Tailwind CSS Basic Concepts

Tailwind CSS is a highly customizable CSS framework that provides a set of predefined utility classes, allowing developers to quickly build and design user interfaces.

The following are some basic concepts and usages of Tailwind CSS:

ConceptDescription
Utility Classes (Utility-First)The core of Tailwind CSS is utility classes, used to quickly set styles and apply them directly to HTML elements.
Responsive PrefixesUse such assm:, md:, lg:, xl:prefixes to control styles at different screen sizes.
Colors and SizesProvides predefined colors (such asbg-red-500) and sizes (such astext-lg) to quickly set styles.
SpacingThroughp-, m-, pt-, pr-and other classes to control padding and margin.
LayoutProvidesflex, grid, floatand other classes to implement layout control.
Text StylesIncludes utility classes for text alignment, font styles, colors, and transformations, such astext-center, font-bold, uppercase。
Backgrounds and BordersProvides utility classes for background colors, background images, border styles, and colors, such asbg-gray-200, border-red-500。
Hover and StatesUsehover:, focus:, active:and other prefixes to define styles for interactive states.
SizingUsew-, h-classes to control width and height, such asw-64, h-screen。
VisibilityUsevisible, invisibleand other classes to control element visibility.
Grid SystemProvides utility classes based on CSS Grid, such asgrid, grid-cols-3, col-span-2, to implement responsive grid layouts.
Custom ConfigurationThroughtailwind.config.jscustomize colors, spacing, font sizes, etc., to suit project needs.
Dark ModeSupports dark mode, usingdark:prefix to set styles, and dark mode can be enabled in the configuration.
PluginsExtend functionality through plugins, adding custom utility classes or features.
DirectivesUse in CSS files@tailwinddirectives to import different layers of styles, such asbase, components, utilities。

Concept Details

1. Utility Classes (Utility-First)

Tailwind's utility classes allow developers to quickly define styles without manually writing CSS.

Example

<div class="text-center text-blue-500 font-bold">
  Tailwind Utility Classes
</div>

Try it »

Explanation:

  • text-center: Center alignment.
  • text-blue-500: Blue text.
  • font-bold: Bold font.

2. Responsive Prefixes

Use prefixes to set styles at different screen sizes.

Example

<div class="bg-red-500 sm:bg-green-500 md:bg-blue-500 lg:bg-yellow-500">
  Responsive Example
</div>

Try it »

Explanation:

  • Default: Red background.
  • Small screens (≥640px): Green background.
  • Medium screens (≥768px): Blue background.
  • Large screens (≥1024px): Yellow background.

3. Colors and Sizes

Tailwind provides a rich set of predefined colors and sizes for quick application.

Example

<p class="text-lg text-gray-600">
  Text with pre-defined size and color
</p>

Try it »

Explanation:

  • text-lg: Font size.
  • text-gray-600: Gray text.

4. Spacing

Set element padding and margins using spacing utility classes.

Example

<div class="p-4 m-8">
  Padding and Margin Example
</div>

Try it »

Explanation:

  • p-4: Padding is 1rem.
  • m-8: Margin is 2rem.

5. Layout

The provided classes can quickly implement flexible layout methods, such as Flexbox and Grid.

Example

<div class="flex justify-between items-center">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

Try it »

Grid Example:

Example

<div class="grid grid-cols-3 gap-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Try it »

6. Text Styles

Control text alignment, color, size, and other styles.

Example

<p class="text-center font-semibold text-red-500">
  Centered Bold Text
</p>

Try it »

7. Backgrounds and Borders

Use utility classes to set background colors, images, and border styles.

Example

<div class="bg-yellow-200 border border-gray-400">
  Background and Border Example
</div>

Try it »

8. Hover and States

Set state styles for interactive elements.

Example

<button class="bg-blue-500 hover:bg-blue-700 text-white">
  Hover Me
</button>

Try it »

9. Sizing

Set the width and height of elements.

Example

<div class="w-64 h-32 bg-gray-300">
  Width and Height
</div>

Try it »

10. Visibility

Control the display and hiding of elements.

Example

<div class="invisible sm:visible">
  Visible only on small screens
</div>

Try it »

11. Grid System

Use Tailwind's Grid utility classes to create grid layouts.

Example

<div class="grid grid-cols-3 gap-2">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Try it »

12. Custom Configuration

Customize the design system through configuration files.

Example

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#1D4ED8',
      },
    },
  },
}

Try it »

13. Dark Mode

Enable dark mode and define styles.

Example

<div class="bg-white dark:bg-black text-black dark:text-white">
  Dark Mode Example
</div>

Try it »

14. Plugins

Extend Tailwind's functionality through plugins.

Example

// tailwind.config.js
const plugin = require('tailwindcss/plugin')
module.exports = {
  plugins: [
    plugin(function({ addUtilities }) {
      addUtilities({
        '.rotate-45': {
          transform: 'rotate(45deg)',
        },
      })
    }),
  ],
}

15. Directives

Through@tailwinddirectives to load different layers of Tailwind.

Example

@tailwind base;
@tailwind components;
@tailwind utilities;
Other Extensions