How to Use Tailwind CSS with My Own CSS Variables and Disable Purging?

[julzmon]

I've been trying to integrate Tailwind CSS (v3 or v4) with my design system, specifically to:

• Reference my own semantic CSS variables defined from design tokens.
• Generate static CSS utilities without Tailwind scanning or purging any files.

However, I haven't been able to achieve this successfully. Is there a recommended way to accomplish this? Any guidance or examples would be greatly appreciated! Specifically, when using Tailwind CSS v3, it requires specifying content references, and I haven't figured out how to disable this requirement.

Thank you for your help in advance!

[wongjn]

You can't really disable "purging" in v3 or v4 since there is nothing to purge. Both v3 and v4 generate only what is required. With arbitrary values (v3 and v4), arbitrary variants (v3 and v4), arbitrary properties (v3 and v4) and bare values (v4) classes, there is an infinite amount of classes available so there is no static list.

[julzmon]

@wongjn I have the following config I used for Tailwind 2 to generate utility classes for our design system that we published along with our library. Are you saying it's not possible to do something similar with v4?

module.exports = {
  theme: {
    screens: {
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
    },
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      black: 'var(--color-black)',
      white: 'var(--color-white)',
    },
    spacing: {
      0: '0',
      1: 'var(--spacer-1)',
      2: 'var(--spacer-2)',
      3: 'var(--spacer-3)',
      4: 'var(--spacer-4)',
      5: 'var(--spacer-5)',
      6: 'var(--spacer-6)',
      7: 'var(--spacer-7)',
      8: 'var(--spacer-8)',
      9: 'var(--spacer-9)',
      10: 'var(--spacer-10)',
      11: 'var(--spacer-11)',
      12: 'var(--spacer-12)',
      px: '1px',
    },
    fontSize: {
      default: 'var(--font-size)',
      1: 'var(--font-size-1)',
      2: 'var(--font-size-2)',
      3: 'var(--font-size-3)',
      4: 'var(--font-size-4)',
      5: 'var(--font-size-5)',
      6: 'var(--font-size-6)',
      7: 'var(--font-size-7)',
      8: 'var(--font-size-8)',
      9: 'var(--font-size-9)',
      10: 'var(--font-size-10)',
      11: 'var(--font-size-11)',
    },
    fontFamily: {
      base: 'var(--font-family)',
      heading: 'var(--headings-font-family)',
    },
    letterSpacing: {
      tightest: 'var(--letter-spacing-tighest)',
      tighter: 'var(--letter-spacing-tighter)',
      tight: 'var(--letter-spacing-tight)',
      normal: 'var(--letter-spacing-normal)',
      wide: 'var(--letter-spacing-wide)',
      wider: 'var(--letter-spacing-wider)',
      widest: 'var(--letter-spacing-widest)',
    },
    lineHeight: {
      none: '1',
      base: 'var(--base-line-height)',
      sm: 'var(--line-height-sm)',
      md: 'var(--line-height-md)',
      lg: 'var(--line-height-lg)',
      xl: 'var(--line-height-xl)',
    },
    container: {
      padding: 'var(--spacer-4)',
    },
    borderRadius: {
      base: 'var(--base-border-radius)',
      sm: 'var(--spacer-1)',
      md: 'var(--spacer-3)',
      lg: 'var(--spacer-4)',
      full: '50%',
      pill: '50rem',
    },
    borderWidth: {
      base: 'var(--base-border-width)',
      0: '0',
      sm: '1px',
      md: 'var(--spacer-1)',
      lg: 'var(--spacer-2)',
      xl: 'var(--spacer-3)',
    },
    zIndex: {
      0: '0',
      dropdown: 'var(--zindex-dropdown)',
      sticky: 'var(--zindex-sticky)',
      fixed: 'var(--zindex-fixed)',
      'modal-backdrop': 'var(--zindex-modal-backdrop)',
      modal: 'var(--zindex-modal)',
      popover: 'var(--zindex-popover)',
      tooltip: 'var(--zindex-tooltip)',
      auto: 'auto',
    },
    extend: {
      textColor: {
        base: 'var(--text-color)',
        muted: 'var(--text-muted-color)',
        link: 'var(--link-color)',
        primary: 'var(--primary-text-color)',
        success: 'var(--success-text-color)',
        danger: 'var(--danger-text-color)',
        warning: 'var(--warning-text-color)',
      },
      backgroundColor: {
        base: 'var(--base-bg-color)',
        'base-light': 'var(--base-bg-light-color)',
        danger: 'var(--danger-bg-color)',
        'danger-light': 'var(--danger-bg-light-color)',
        warning: 'var(--warning-bg-color)',
        'warning-light': 'var(--warning-bg-light-color)',
        primary: 'var(--primary-bg-color)',
        'primary-light': 'var(--primary-bg-light-color)',
        success: 'var(--success-bg-color)',
        'success-light': 'var(--success-bg-light-color)',
      },
      borderColor: {
        base: 'var(--base-border-color)',
        'base-interactive': 'var(--base-border-interactive-color)',
        danger: 'var(--danger-border-color)',
        'danger-interactive': 'var(--danger-border-interactive-color)',
        warning: 'var(--warning-border-color)',
        'warning-interactive': 'var(--warning-border-interactive-color)',
        primary: 'var(--primary-border-color)',
        'primary-interactive': 'var(--primary-border-interactive-color)',
        success: 'var(--success-border-color)',
        'success-interactive': 'var(--success-border-interactive-color)',
      },
      height: {
        'screen-25': '25vh',
        'screen-50': '50vh',
      },
      gap: {
        base: 'var(--grid-gap-5)',
      },
      minWidth: {
        'screen-25': '25vw',
        'screen-50': '50vw',
      },
    },
  },
  variants: {
    accessibility: [''],
    backgroundColor: [''],
    backgroundOpacity: [''],
    borderColor: [''],
    borderOpacity: [''],
    borderRadius: [''],
    borderStyle: [''],
    borderWidth: [''],
    boxShadow: [''],
    fontVariantNumeric: [''],
    fontWeight: [''],
    opacity: [''],
    outline: [''],
    textColor: [''],
    textDecoration: [''],
    textOpacity: [''],
    zIndex: [''],
  },
  corePlugins: {
    animation: false,
    appearance: false,
    ...
  },
};

[wongjn]

That Tailwind configuration looks portable to v4 for the most part.