Skip to content

Commit 74abdeb

Browse files
committed
chore: add Readme
1 parent 4d3a3f8 commit 74abdeb

File tree

1 file changed

+45
-0
lines changed

1 file changed

+45
-0
lines changed

README.md

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
# Optimize Tailwindcss V3 selectors for `space-*` and `divide-*` classes
2+
3+
> PostCSS plugin that optimizes the selectors & corresponding attributes for Tailwind CSS v3's `.space-*` and `.divide-*` utility classes
4+
5+
For Use TailwindCSS V3
6+
> [!IMPORTANT] This plugin is intended for use with Tailwind CSS v3 as the problem this plugin solves is [already solved in v4](https://github.com/tailwindlabs/tailwindcss/pull/13459)
7+
8+
## Why?
9+
10+
In tailwindcss v3, the selector used for [`space-*`](https://v3.tailwindcss.com/docs/space) and [`divide-*`](https://v3.tailwindcss.com/docs/divide-width) utility classes was a relatively complex and slow selector used to accommodate hidden elements.
11+
12+
```css
13+
/* before.css */
14+
.space-x-1 > :not([hidden]) ~ :not([hidden]) {
15+
--tw-space-x-reverse: 0;
16+
margin-right: calc(0.25rem * var(--tw-space-x-reverse));
17+
margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
18+
}
19+
```
20+
21+
This slow selector can result in slow element render delays which then degrade page performance and FCP metrics for a page. TailwindCss v4 introduced a significantly faster selector that doesn't accommodate for hidden elements.
22+
```css
23+
/* after.css */
24+
.space-x-1 > :not(:last-child) {
25+
--tw-space-x-reverse: 0;
26+
margin-right: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
27+
margin-left: calc(0.25rem * var(--tw-space-x-reverse));
28+
}
29+
```
30+
31+
This Plugin ports these changes to v3. It also allows for using a v3 compatible selector that doesn't change the attributes
32+
```css
33+
/* when using `useV3CompatibleSelector: true` */
34+
/* after.css */
35+
.space-x-1 > * + * {
36+
--tw-space-x-reverse: 0;
37+
margin-right: calc(0.25rem * var(--tw-space-x-reverse));
38+
margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
39+
}
40+
```
41+
42+
Important References
43+
- https://github.com/tailwindlabs/tailwindcss/discussions/13445#discussioncomment-9015050
44+
- https://github.com/tailwindlabs/tailwindcss/pull/13459
45+
- https://github.com/tailwindlabs/tailwindcss/issues/15162

0 commit comments

Comments
 (0)