esamattis / esamattis/postcss-ts-classnames
Tailwind performance issues
- Dominant language
- TypeScript
- Stars
- 71
- Forks
- 4
- PR merge metrics
- No merged PRs in 30d
Description
This is not an actionable issue / bug as is, but discussions wasn't enabled for this repo. The actual question is: what strategies are there to optimise either the TS compile time, or the amount of class names? We're using Tailwind, which results to around 40k classnames available dev time.
One option that I was thinking is that if this plugin would be ran after the Tailwind CSS has been purged, then it would only output the types that are used in the code. I'm not sure if that is practical, since the workflow is:
* Add class name to your component e.g. `bg-newcolor-100`
* This should trigger a rebuild for PostCSS
1. Tailwind full CSS is built (containing 40k classnames)
2. CSS is purged, so that only the ones referred from code are left (let's say e.g. 1k classnames left)
3. `postcss-ts-classnames` plugin generates the reduced typing file with only 1k classnames.
At this stage, the new `| 'bg-newcolor-100'` is added to auto generated types
* Only after doing all that, VS Code (or another editor), starts the re-evaluation of type errors and should clear out the red error highlighting from the component's `bg-newcolor-100` code.
Any additional ideas or hints for optimisation? Thanks.
Contributor guide
No contributing guide indexed for this repository
Research direction
The issue names no repository files, tests, or entry points. Start by tracing the PostCSS, Tailwind, and generated TypeScript workflow described in the issue, then compare compile-time and generated-class-name costs. Done would require an agreed optimization strategy and a concrete, actionable scope.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, tailwindcss, typescript
- Domain
- build-system, performance, tooling
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 20/100