Tailwindcss: Feature Request: Option to disable certain utilities

[tormjens]

Wow, you really got me hooked on the utility first approach. It's really neat, and Tailwind is fantastic.

One thing I've stumbled upon while integrating it in an existing project (to slowly move much stuff over to utilities) is that an option to disable certain utilities would be really valuable.

For example, in my project, I have a .container class defined in my stylesheet. Since the tailwind utilities load after my already defined components, Tailwind overwrites these styles.

While most of the time one would start off with this on a fresh codebase, for me having the ability to disable utilities like that would be great.

Again, fantastic job on Tailwind. Congrats to all contributors!

[adamwathan]

We definitely have plans for this for 0.2.0 👍 Will leave this open until it's implemented but it's coming for sure!

[tormjens]

Great stuff. Looking forward to it 👍

[HellPat]

@adamwathan would be nice to share share your plans, so we could tinker about it too.
Also happy to help if possible ;-)

[adamwathan]

@psren What we're thinking right now is adding a bunch of stuff to the new options key introduced to the config in #183.

It would let you enable or disable modules, add hover/focus/etc states to different modules, or even to just certain variants in those modules.

It wouldn't be configurable to the point where you could control it at the per-utility level, but hopefully keeping the modules fairly fine-grained and supporting enabling/disabling at the module level will be a good balance between simplicity and customizability.

Here's what that key might end up looking like for a project:

{
  // ...
  options: {
    important: false,
    prefix: 'tw-',
    modules: {
      // False will disable a module entirely
      forms: false,

      // Array syntax will make every utility in this module adopt these variants
      backgroundColors: ['responsive', 'hover', 'focus', 'active'],
      backgroundPositions: ['responsive'],
      shadows: ['responsive', 'hover'],

      // You can even omit 'responsive' if you don't need responsive versions
      textStyle: [],

      // Object syntax lets you only generate variants for certain modifiers
      borderColors: {
        responsive: true,
        hover: ['red-dark', 'green', 'blue'],
        active: ['blue'],
      },

      // True will enable a module with Tailwind's default opinions about what variants to include.
      // This makes it easy for us to have off-by-default modules, like CSS Grid.
      gridLayout: true,
    },
  },
}

This would all be completely optional of course, and this whole key will be merged with some sane defaults.

[HellPat]

It wouldn't be configurable to the point where you could control it at the per-utility level

I don't think this is necesarry. Utilities of the same type gzip quite well and I like it that you can be sure that if radius-lt is used somewhere I can also use radius-rt.
Better usability > slightly smaller file.

looks good to me so far :-)

[adamwathan]

v0.3 now supports this (at least to the level we intend to provide it):

https://tailwindcss.com/docs/configuration#modules

[hacknug]

@adamwathan any way to specify modules like what you shared here?

borderColors: {
  responsive: true,
  hover: ['red-dark', 'green', 'blue'],
  active: ['blue'],
}

[adamwathan]

Not yet; might still explore that eventually but not a high priority right now.

[rgaufman]

Any solution to this? - I'm trying to use tailwind 1.0.3 on top of bootstrap 4.3.1 and some styles seem to be affected like dropdown shadows.

[AlexVipond]

@rgaufman Three solutions:

Remove/disable all tailwind classes for a plugin

// tailwind.config.js
module.exports = {
  theme: {
    boxShadow: {}
  }
}

Prefix all tailwind class names

// tailwind.config.js
module.exports = {
  prefix: 'tw-',
}

Change individual class names in theme configuration

// tailwind.config.js
module.exports = {
  theme: {
    boxShadow: {
      /* This would produce class names like shadow-none-tw, shadow-tw, shadow-md-tw */
      'none-tw': 'none',
      '-tw': '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
      'md-tw': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
      ...
    } 
  }
}

[knynkwl]

It would be nice if there was a disableAll option, so I could enable only the properties I would like generated. This would cut the time down needed building.

[estevanmaito]

@knynkwl you already can do it https://tailwindcss.com/docs/configuration/#core-plugins

module.exports = {
  corePlugins: []
}

[knynkwl]

🤦 Thanks @estevanmaito! Is there a way to specify groups instead of having to specify each set?

e.g., instead of ['flex', 'flexGrow', 'flexShrink', ...] I could specify to use all flex options ['flexbox']?

[estevanmaito]

Nope. You could copy the list of core plugins and remove everything you don't want. Would take some minutes, but if your compiling times are huge, could be useful.