Tailwind CSS Configuration

The core configuration file of Tailwind CSS istailwind.config.js。

tailwind.config.js is the configuration file for Tailwind CSS, used to customize Tailwind's default configuration.

By modifying the tailwind.config.js file, developers can customize design system elements such as colors, spacing, fonts, and breakpoints to meet specific project requirements.

Create Configuration File

You can quickly generate a basic tailwind.config.js file using the Tailwind CSS CLI tool.

Run the following command in the project root directory:

npx tailwindcss init

This will create a tailwind.config.js file containing the basic configuration.

Basic Structure

The following is the structure of a typical tailwind.config.js file:

The above code tells Tailwind CSS to scan all .html, .js, and .vue files in the src directory.

Main Configuration Items

1. Configure Template Path: content

content: [
  "./index.html", // 单文件路径
  "./src/**/*.{html,js,ts,jsx,tsx}", // 包含多个文件类型的路径
],

This tells Tailwind CSS to scan all .html, .js, .ts, .jsx, and .tsx files in the src directory.

The content field is used to specify the template file paths for Tailwind. Tailwind scans these files to generate the necessary styles, reducing the generated CSS file size by only generating styles used in the template files, preventing unused styles from being compiled into the final output.

2. Customize Theme: theme

In the theme section, you can define colors, fonts, spacing, border sizes, and more.

For example, extend the default colors or add new colors:

theme: {
  extend: {
    colors: {
      cyan: '#9CDBFF',
    }
  }
}

This will add a new color named cyan, and you can use class names like bg-cyan in your project.

Define colors via theme.colors and reference them in styles.

theme: {
  extend: {
    colors: {
      brand: {
        light: '#93C5FD',
        DEFAULT: '#3B82F6',
        dark: '#1E40AF',
      },
    },
  },
}

Enable Tailwind's dark mode support via darkMode.

module.exports = {
  darkMode: 'class', // 或 'media'
  theme: {
    extend: {
      colors: {
        background: {
          light: '#FFFFFF',
          dark: '#000000',
        },
      },
    },
  },
}

3. Configure Variants: variants

The variants option allows you to define which states (such as hover, focus, etc.) should be included in the final CSS.

You can extend or override the default variants:

variants: {
  extend: {
    borderColor: ['focus-visible'],
    opacity: ['disabled'],
  }
}

4. Use Plugins: plugins

The plugins option allows you to add custom utility classes.

These plugins can be officially provided by Tailwind CSS or created by the community, with the format as follows:

plugins: [
  require('some-tailwindcss-plugin')
]

Example of using a plugin:

Import community plugins:

Tailwind CSS Configuration

By default, Tailwind looks for the tailwind.config.js file in the project root directory, where you can set the configuration information you need:

The following table lists the configuration options of the tailwind.config.js file and their usage descriptions:

With tailwind.config.js, you can easily customize the features and styles of Tailwind CSS to suit various design needs. Making reasonable use of features such as extend, plugins, and theme configuration can greatly improve project development efficiency and style flexibility.