Comments (4)
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.
from twin.macro.
The only plugin is @tailwindcss/line-clamp
from twin.macro.
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.
from twin.macro.
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
from twin.macro.
Related Issues (20)
- NX React - Module '"twin.macro"' has no exported member 'styled' HOT 1
- DaisyUI 3.x Tooltip dynamic variant not working
- `group-x` classes containing `/` aren't working correctly
- Support for @headlessui/tailwindcss prefixes in inner classes HOT 2
- the name `_GlobalStyles` is defined multiple times HOT 1
- Unable to clone and style existing components with Stitches using standard syntax HOT 3
- Doesn't work with CodeSandbox React template HOT 1
- Error when passing props to the css attribute in solid/stitches HOT 3
- CSS `calc` with more than 2 `theme` keywords HOT 1
- Can't resolve 'v8' (Twin + Next.js + Styled Components) HOT 9
- Twin Macro Doesn't Work With Next.js (A Working Example Would Solve This) HOT 6
- Dynamic is not working as expected in next-emotion-typescript HOT 2
- Module not found: Can't resolve 'v8' HOT 3
- Property 'cs' is missing in type.... HOT 2
- Next 14 layout shift (maybe css load after render) HOT 2
- Jest testing (typescript) - twin_macro_1.theme is not a function HOT 2
- Errors in vite 5.0.0 HOT 1
- TypeScript type error with TwImportComponent in jest-testing-typescript
- CSS fallback values from Tailwind config `extend` are missing HOT 2
- Props don't get passed down when composing components HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from twin.macro.