Open lstkz opened 1 year ago
ben-rogerson
commented
1 year ago 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
commented
1 year ago The only plugin is @tailwindcss/line-clamp
ben-rogerson
commented
1 year ago 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
commented
1 year ago 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
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
Any idea what's the reason? 2x build time is huge.