[Vuejs]-Force TailwindCSS cherry picking of classes to pick up certain classes

by

3👍

✅

Yes, it is possible with what is called "Safelisting classes" that is documented here: https://tailwindcss.com/docs/content-configuration#safelisting-classes

So you can add the classes to your config like this:

  safelist: [
    'w-1/2',
    'w-1/3',
    'w-1/4',
    ...
  ]

Note for w-1/1, it does not exist by default. You could add it to the config if needed, but otherwise w-1/1 would be ignored and if it is a block element it should default to 100% anyway.

module.exports = {
  theme: {
    extend: {
      width: {
        '1/1': '100%'
      }
    },
  },
}
👤stickyuser

Leave a comment