Can I remove these strings from my final css bundle?

[frederikhors]

I'm using PurgeCSS.

Is there a way I can remove all occurrences (a lot!) of these strings from my final css bundle?

1. --tw-space-x-reverse
2. --tw-space-y-reverse
3. --tw-divide-y-reverse
4. --tw-ring-offset-shadow
5. --tw-ring-shadow

By the way I'm not using ring at all with:

corePlugins: {
    backgroundOpacity: false,
    borderOpacity: false,
    divideOpacity: false,
    float: false,
    fontVariantNumeric: false,
    placeholderOpacity: false,
    ringColor: false,
    ringOffsetColor: false,
    ringOffsetWidth: false,
    ringOpacity: false,
    ringWidth: false,
    textOpacity: false,
  }

[MartinHughes-BPC]

Hi @frederikhors

Are you using Tailwind's purge feature? That should get rid of any unused classes.

Cheers,
Martin.

[frederikhors]

Yep. I'm already using it.

[MartinHughes-BPC]

Hey @frederikhors

Could you share your tailwind conf and/or how you call PurgeCSS? I'm wondering why this is happening to you, as in my project I don't get these classes unless I specifically want them. Also weird that you specifically disable them and yet they still appear.

Cheers,
Martin.

[frederikhors]

I'm using:

const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    extend: {
      colors: {
        cyan: colors.cyan,
        indigo: colors.indigo
      }
    }
  },
  darkMode: false,
  variants: {
    extend: {
      backgroundColor: ['even'],
    }
  },
  plugins: [
    require('@tailwindcss/forms'),
  ],
  corePlugins: {
    backgroundOpacity: false,
    borderOpacity: false,
    divideOpacity: false,
    float: false,
    fontVariantNumeric: false,
    placeholderOpacity: false,
    ringColor: false,
    ringOffsetColor: false,
    ringOffsetWidth: false,
    ringOpacity: false,
    ringWidth: false,
    textOpacity: false,
  }
}

[MartinHughes-BPC]

In my tailwind config I have the following section:

purge: [
        './resources/**/*.vue',
        './resources/**/*.js',
        './resources/**/*.php',

    ],

(from the docs here: https://tailwindcss.com/docs/optimizing-for-production#removing-unused-css )

When I then run my production build script this causes Tailwind to purge any classes.

Might be worth trying. If you can't do it that way, you could try changing the regex you're passing to PurgeCSS to /[^<>"'`\s]*[^<>"'`\s:]/g (also mentioned in the docs).

Cheers,
Martin.

[frederikhors]

I'm using PurgeCSS not in Tailwind config.

It works. I think those strings are from space and divide (see #2849 (comment)).

[jasonhulbert]

@frederikhors Those "strings" are css variables. They are needed at runtime in order for the library's generated CSS to actually work.

I guess what you're asking is can they be removed if the corresponding feature is not being used? If you're using the pre-compiled CSS, I would assume the answer is no as it has no idea what you will/won't use (as it relates to CSS variables).

[frederikhors]

I'm using purgecss. I'll update the question.

[jasonhulbert]

One of the options for PurgeCSS is variables. Try setting that to true.

https://tailwindcss.com/docs/optimizing-for-production#purge-css-options

[frederikhors]

Tried now, thanks. It doesn't change.

[MathGeniusJodie]

do you use the space and divide utilities?
as for the rings, the feature looks hardcoded from the source code
https://github.com/tailwindlabs/tailwindcss/blob/master/src/plugins/boxShadow.js

[frederikhors]

do you use the space and divide utilities?

Yep.

I think we can reduce or minify that too long name. Am I wrong?

[MathGeniusJodie]

I don't think an existing minifier does it yet

[MathGeniusJodie]

cssnano/cssnano#966
opened an issue for cssnano

[MathGeniusJodie]

https://www.npmjs.com/package/postcss-custom-properties-transformer
could try this postcss plugin

[alex-jitbit]

5 years later, hello everyone :) I, too, was optimizing my css size and finally fixed this.

Just stop using space-x- and space-y- utilities and switch to gap-. And all the --tw-space- crap will be gone.

(space-x is for older browsers that do not support flexbox gap, like IE)