Tailwind CSS Custom Styles

Custom styles in Tailwind CSS are mainly implemented by modifying the tailwind.config.js configuration file.

Tailwind provides multiple ways to customize, including custom colors, spacing, fonts, screen breakpoints, and other configuration options.

You can create the tailwind.config.js file with the following command:

npx tailwindcss init

This command will generate a default configuration file in the project root directory.

Custom Theme (theme)

In the theme section of the tailwind.config.js file, you can define colors, fonts, spacing, etc.

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

module.exports = {
  theme: {
    extend: {
      colors: {
        cyan: '#9CDBFF',
      }
    }
  }
}

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

Custom Colors

Tailwind provides a default color system, but you can usetheme.extendto add or modify colors for the project.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'custom-blue': '#1C64F2',
        'custom-gray': '#3A3A3A',
      },
    },
  },
};

在上面的例子中，custom-blue 和 custom-gray 被添加到了颜色系统中，你可以在 HTML 中像使用默认颜色一样使用它们：

Custom Spacing

Tailwind's spacing system includes m- (margin) and p- (padding) classes. You can usetheme.extend.spacingto extend the default spacing values:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      spacing: {
        '128': '32rem',  // 定义一个自定义的间距值
        '144': '36rem',
      },
    },
  },
};

This will allow you to use custom spacing in HTML:

Custom Fonts

Tailwind also allows you to customize font families. You can usefontFamilyto extend the font settings:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        'sans': ['Helvetica', 'Arial', 'sans-serif'],
        'custom': ['"Open Sans"', 'Arial', 'sans-serif'],
      },
    },
  },
};

After that, you can use the font-custom class to apply the custom font:

Custom Breakpoints

Tailwind provides five responsive breakpoints (sm, md, lg, xl, 2xl).

You can modify these breakpoints in tailwind.config.js, or add custom breakpoints:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      screens: {
        'xs': '475px',  // 添加一个新的小屏幕断点
        'xxl': '1600px',  // 添加一个超大屏幕断点
      },
    },
  },
};

At this point, you can use the xs:w-64 or xxl:w-96 classes to set the width at different breakpoints:

Custom Box Shadows

You can extend shadow effects through the boxShadow property.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      boxShadow: {
        'custom': '0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.1)',
      },
    },
  },
};

Then, you can apply this custom shadow in HTML:

---

Extending Tailwind with Plugins

Besides modifying the configuration file, Tailwind also allows you to extend functionality with plugins, so that you can use more utility classes in your project.

Using Tailwind Plugins

You can install third-party plugins to add additional functionality:

npm install @tailwindcss/forms

Then, add the plugin in tailwind.config.js:

// tailwind.config.js
module.exports = {
  plugins: [
    require('@tailwindcss/forms'),
  ],
};

This plugin provides you with many utility classes for form controls.

---

Using @apply to Reuse Styles

If you find yourself using the same combined styles in multiple places, you can reuse them with the @apply directive.

For example, create a custom class that combines multiple utility classes:

@tailwind base;
@tailwind components;
@tailwind utilities;

/* 在你的 CSS 文件中 */
.avatar {
  @apply w-16 h-16 rounded-full border-2 border-white;
}

Compile Tailwind CSS:

npx tailwindcss -i ./styles.css -o ./output.css --watch

After compilation, the generated output.css file will replace @apply with the specific CSS styles.

You can apply the .avatar class to multiple elements without having to rewrite all the utility classes:

---

Using @layer to Define Custom Components

Tailwind allows you to use the @layer directive to define custom component classes.

For example, create a custom button with Tailwind styles:

/* 在你的 CSS 文件中 */
@layer components {
  .btn {
    @apply px-4 py-2 bg-blue-500 text-white font-semibold rounded-lg;
  }

  .btn-danger {
    @apply px-4 py-2 bg-red-500 text-white font-semibold rounded-lg;
  }
}

Then use the custom button class in HTML:

---

Using Variants to Extend State Modifiers

In tailwind.config.js, you can use variants to configure whether Tailwind should generate utility classes for specific states.

For example, add more style variants for the hover and focus states:

// tailwind.config.js
module.exports = {
  variants: {
    extend: {
      backgroundColor: ['active', 'disabled'],
      textColor: ['group-hover'],
    },
  },
};

This will generate more utility classes, such as bg-red-500 active:bg-blue-500, to switch the background color in the active state.

Other Extensions