Tailwindcss how to use custom classes with responsive variants

When working with Tailwind CSS, it's common to adjust styles according to various screen sizes for responsive design. Tailwind offers a straightforward approach to achieve this by utilizing responsive variants. Here are the steps to use custom classes with responsive variants:

Step 1: Define Custom Classes

In Tailwind, you can define custom classes by extending the default configuration in the tailwind.config.js file. For instance, let's create a custom background color class:

javascript
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      backgroundColor: {
        'custom-color': '#ff4785',
      }
    }
  }
}

Step 2: Enable Responsive Variants

Tailwind inherently supports responsive variants based on screen sizes. To apply these variants, prefix class names with sm:, md:, lg:, xl:, or 2xl:. Ensure that your tailwind.config.js file includes these responsive breakpoints.

javascript
// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
      '2xl': '1536px',
    }
  }
}

Step 3: Use Custom Responsive Classes in HTML

Now, you can use these custom responsive classes in HTML elements. For example:

html
<div class="bg-custom-color md:bg-green-500 lg:bg-blue-500">
  <!-- This div will have different background colors on different screen sizes -->
  Responsive Color Change!
</div>

In this example, bg-custom-color is our custom background color, visible on small screens. When the screen size reaches md (medium, 768px) or larger, the background color changes to green, and when it reaches lg (large, 1024px) or larger, it changes to blue.

Summary

By defining custom properties in tailwind.config.js and applying responsive prefixes, Tailwind CSS enables you to effortlessly create responsive style variants. This method enhances the maintainability of styles and simplifies responsive design.