FG
💻 Software🌐 Web & Full-Stack

Support for additional state prefixes and customizing which utilities have state variants

Fresh3 days ago
Mar 14, 20260 views
Confidence Score86%
86%

Problem

Consolidating #27, #121, #125. Right now we only support `hover:{utility}` state variants and only for the following modules: - backgroundColors - borderColors - textColors - fontWeights It would be great to also add support for other states: - `active:` - `focus:` - `placeholder:`, although this is a bit different - `disabled:` - `valid:` - `invalid:` - `required:` (We may not add support for all of these, but listing ideas for reference.) It would also be great to allow customizing which modules have these variants enabled, as enabling all of these for every utility would quickly bloat the outputted CSS. We have plans for all of this, but this issue will serve as a single point of reference so we can keep duplicate issues under control.

Unverified for your environment

Select your OS to check compatibility.

1 Fix

Canonical Fix
Unverified Fix
New Fix – Awaiting Verification

Enhance State Variant Support and Customization in TailwindCSS

Medium Risk

Currently, TailwindCSS only supports the 'hover' state variant for a limited set of utilities, which restricts developers from utilizing other state variants like 'active', 'focus', 'disabled', etc. This limitation can hinder the flexibility and usability of the framework, especially in complex UI scenarios where multiple states are needed. Additionally, enabling all potential state variants for every utility can lead to bloated CSS output, impacting performance.

Awaiting Verification

Be the first to verify this fix

  1. 1

    Define Additional State Variants

    Extend the existing configuration to include additional state variants such as 'active', 'focus', 'disabled', 'valid', 'invalid', and 'required'. This will allow developers to use these states in their utility classes.

    javascript
    module.exports = {
  variants: {
    backgroundColor: ['hover', 'focus', 'active', 'disabled'],
    borderColor: ['hover', 'focus', 'active', 'disabled'],
    textColor: ['hover', 'focus', 'active', 'disabled'],
    fontWeight: ['hover', 'focus'],
  },
};
  2. 2

    Implement Customization for Utility Modules

    Allow developers to customize which utilities can use the new state variants by providing a configuration option in the TailwindCSS setup. This will prevent unnecessary CSS bloat.

    javascript
    module.exports = {
  theme: {
    extend: {
      variants: {
        backgroundColor: ['hover', 'focus'], // Customize here
        textColor: ['hover', 'focus', 'active'], // Customize here
      },
    },
  },
};
  3. 3

    Update Documentation

    Ensure that the TailwindCSS documentation is updated to reflect the new state variants and customization options. This will help users understand how to implement these features effectively.

  4. 4

    Test New State Variants

    Create a set of tests to verify that the new state variants are functioning correctly across different utilities. This includes checking that the CSS output is as expected and that there are no conflicts.

    bash
    npm run test
  5. 5

    Deploy Changes

    Once testing is complete and all issues are resolved, deploy the changes to the production environment. Monitor the application for any unexpected behavior.

    bash
    git push origin main

Validation

Confirm the fix by testing the new state variants in a sample project. Ensure that the CSS output includes the new variants and that they work as intended without any performance issues. Additionally, check the documentation for accuracy.

Sign in to verify this fix

Environment

Submitted by

AC

Alex Chen

2450 rep

Tags

tailwindcsscss