Performance regression when switching to v3

[lstkz]

I am upgrading from 2.8.2 to 3.3.1.

Stats when starting in dev mode:

3.3.1.
client (webpack 5.74.0) compiled successfully in 46440 ms

2.8.2
client (webpack 5.74.0) compiled successfully in 24353 ms

Other libs

"tailwindcss": "3.3.2",
"styled-components": "^5.3.9",
"babel-plugin-macros": "^3.1.0",
"babel-plugin-styled-components": "^2.0.7",

Any idea what's the reason? 2x build time is huge.

[ben-rogerson]

This is the first time I've heard of a performance dip after the upgrade to version 3.
Are you running any plugins with tailwindcss?
Twin now uses much more of the tailwindcss code to assist with conversions so I guess it's possible the newly added plugin API support could be slowing things down.

[lstkz]

The only plugin is @tailwindcss/line-clamp

[ben-rogerson]

That shouldn't be the cause of the issue.

What does your tailwind.config look like?
How heavy is your usage of styles - would you say hundreds of classes in some files?
Are you using vite/cra/plain webpack/next.js etc?

Thanks ahead for the info, this could help troubleshoot the issue.

[lstkz]

What does your tailwind.config look like?

The config is quite simple

const spacing = {
  0: '0px',
  0.5: '2px',
  1: '4px',
  1.5: '6px',
  2: '8px',
  2.5: '10px',
  3: '12px',
  3.5: '14px',
  4: '16px',
  5: '20px',
  6: '24px',
  7: '28px',
  8: '32px',
  9: '36px',
  10: '40px',
  11: '44px',
  12: '48px',
  13: '50px',
  14: '56px',
  15: '60px',
  16: '64px',
  20: '80px',
  23: '90px',
  24: '96px',
  28: '112px',
  32: '128px',
  36: '144px',
  40: '160px',
  44: '176px',
  48: '192px',
  52: '208px',
  56: '224px',
  60: '240px',
  64: '256px',
  72: '288px',
  80: '320px',
  96: '384px',
};
const colors = {
  current: 'currentColor',
  transparent: 'transparent',
  blue: {
    50: '#F1F7FF',
    100: '#D2E5FF',
    200: '#B3D4FF',
    300: '#94C2FF',
    400: '#74B0FF',
    500: '#5A93DD',
    600: '#4377BB',
    700: '#2F5D99',
    800: '#1F4577',
    900: '#122F55',

    // TODO: remove this color when migrating dark mode
    lightAccent: '#73d0f9',
  },
  'blue-light': {
    50: '#EFF9FF',
    100: '#CDEEFF',
    200: '#ABE2FF',
    300: '#85D0F8',
    400: '#5FBCED',
    500: '#499ECB',
    600: '#3681A9',
    700: '#256587',
    800: '#184A65',
    900: '#0D3043',
  },
  'blue-gray': {
    50: '#F9FAFE',
    100: '#E6ECF9',
    200: '#D3DEF4',
    300: '#C1D1EF',
    400: '#A2B2D2',
    500: '#8494B5',
    600: '#697997',
    700: '#505E7A',
    800: '#39455D',
    900: '#252E40',
  },
  red: {
    50: '#FFECE7',
    100: '#FFCBBE',
    200: '#FFA994',
    300: '#FF876A',
    400: '#FF6640',
    500: '#FF4416',
    600: '#DD2C00',
    700: '#B42400',
    800: '#8B1C00',
    900: '#631400',
  },
  green: {
    50: '#EDFFED',
    100: '#CEFFCE',
    200: '#AEFFAE',
    300: '#8EFF8E',
    400: '#6FFF6F',
    500: '#4FFF4F',
    600: '#2EDC2E',
    700: '#13B313',
    800: '#008A00',
    900: '#006100',
  },
  yellow: {
    50: '#FFF7EC',
    100: '#FFE6C1',
    200: '#FFD596',
    300: '#FFC46C',
    400: '#FAAF40',
    500: '#D8932C',
    600: '#B6781C',
    700: '#945F10',
    800: '#724706',
    900: '#503000',
  },
  white: 'white',
  black: 'black',
  gray: {
    50: '#F2F2F2',
    100: '#E6E6E6',
    200: '#CCCCCC',
    300: '#B3B3B3',
    400: '#999999',
    500: '#808080',
    600: '#666666',
    700: '#4D4D4D',
    800: '#333333',
    900: '#191919',
    950: '#0D0D0D',
  },
  'legacy-dark': {
    1: '#000000',
    2: '#000f17',
    3: '#172332',
    4: '#1a2737',
    5: '#223348',
  },
  dark: {
    0: '#101010',
    1: '#1C1C1C',
    2: '#212121',
    3: '#232323',
    4: '#262626',
    6: '#2A2A2A',
    8: '#2D2D2D',
    12: '#313131',
    16: '#343434',
    24: '#363636',
    // High Emphasis
    he: 'rgba(255, 255, 255, 0.87)',
    // Medium Emphasis
    me: 'rgba(255, 255, 255, 0.60)',
    outline: 'rgba(255, 255, 255, 0.12)',
  },
  special: {
    // TODO migrate and remove
    navy: '#003198',
  },
};

module.exports = {
  darkMode: 'class',
  theme: {
    fontFamily: {
      sans: ['Roboto', 'Helvetica', 'Arial', 'sans-serif'],
      serif: ['serif'],
    },
    colors,
    spacing: spacing,
    fontSize: {
      xs: '10px',
      sm: '11px',
      base: '13px',
      lg: '16px',
      xl: '18px',
      '2xl': '20px',
      '3xl': '24px',
      '4xl': '28px',
      '5xl': '32px',
    },
    screens: {},
    boxShadow: {
      focus: `inset 0 0 0 2px ${colors.blue['600']}`,
      focusOuter: `0 0 0 2px ${colors.blue['600']}`,
      focusLight: `inset 0 0 0 2px ${colors.yellow['600']}, inset 0 0 0 4px #fff`,
      DEFAULT: '0 2px 5px 0 rgba(0, 0, 0, 0.1)',
      none: 'none',
      // TODO: fix harcoded color for dark theme
      darkFocus: `inset 0 0 0 2px #0a99ff, inset 0 0 0 3px ${colors.dark['2']};`,
      top: 'inset 0 6px 6px 0 rgb(100 100 100 / 10%)',
      blue: '0px 1px 2px rgba(27, 78, 163, 0.24), 0px 2px 4px rgba(41, 121, 255, 0.24);',
      largeBlur: '-4px 4px 40px rgba(0, 0, 0, 0.3);',
      right: '1px 1px 10px rgba(0, 0, 0, 0.25);',
      rightXs: '1px 1px 10px rgba(0, 0, 0, 0.1);',
      left: '-4px 0px 4px -4px rgba(0, 0, 0, 0.25)',
    },
    borderWidth: {
      DEFAULT: '1px',
      0: '0',
      2: '2px',
      3: '3px',
      4: '4px',
      5: '5px',
      8: '8px',
    },
    borderRadius: {
      none: '0',
      sm: '2px',
      DEFAULT: '4px',
      md: '6px',
      lg: '8px',
      full: '9999px',
    },
    extend: {
      minWidth: spacing,
      minHeight: spacing,
      fill: colors,
      zIndex: {
        max: '1000000',
      },
      backgroundOpacity: {
        hover: 0.08,
        disabled: 0.38,
      },
      screens: {
        sm: '481px',
        md: '700px',
        lg: '1025px',
      },
      animation: {
        'fade-in': 'fadein 1s linear',
      },
    },
  },
  variants: {
    extend: {},
    width: ['dark'],
    height: ['dark'],
    borderRadius: ['dark'],
    padding: ['dark'],
    fill: ['dark'],
  },
  plugins: [require('@tailwindcss/line-clamp')],
};

How heavy is your usage of styles - would you say hundreds of classes in some files?

Usages in all files:
tw= ~1000 results
css= ~200 results
`css`` ~100 results

Definitely less than 100 styles in a single file.

Are you using vite/cra/plain webpack/next.js etc?

webpack

Also, node version is v18.14.2