You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Feb 14, 2022. It is now read-only.
Copy file name to clipboardExpand all lines: src/pages/tailwindcss-v2/index.mdx
+21-13Lines changed: 21 additions & 13 deletions
Original file line number
Diff line number
Diff line change
@@ -55,7 +55,7 @@ Also how about that [brand new website](https://tailwindcss.com) eh? Hot damn.
55
55
56
56
---
57
57
58
-
## All-new color palette
58
+
<h2id="all-new-color-palette">All-new color palette</h2>
59
59
60
60
We've learned a lot about color since the first time we tried to design a general purpose color palette back in the Tailwind CSS v0.1.0 days, and v2.0 represents our best attempt so far.
61
61
@@ -95,7 +95,7 @@ Learn more in the new [customizing colors documentation](https://tailwindcss.com
95
95
96
96
---
97
97
98
-
## Dark mode
98
+
<h2id="dark-mode">Dark mode</h2>
99
99
100
100
Ever since iOS added native dark mode all you dark mode nerds haven't been able to leave me alone about adding it to Tailwind. Well you did it, it's here, you win.
101
101
@@ -150,7 +150,7 @@ Check out the [dark mode docs](https://tailwindcss.com/docs/dark-mode) for all t
I'm pretty sure they make an iPhone that is 1280px wide now, so it's time to step it up.
156
156
@@ -164,7 +164,7 @@ Exciting I know but also let's be serious [you've been able to add this yourself
164
164
165
165
---
166
166
167
-
## New outline ring utilities
167
+
<h2id="new-outline-ring-utilities">New outline ring utilities</h2>
168
168
169
169
You know how the `outline` property ignores border radius and pretty much just always looks bad? The `ring` utilities are our attempt to will a better solution into existence through blood, sweat, and tears.
170
170
@@ -200,7 +200,7 @@ The [ring width documentation](https://tailwindcss.com/docs/ring-width) is the b
200
200
201
201
---
202
202
203
-
## Utility-friendly form styles
203
+
<h2id="utility-friendly-form-styles">Utility-friendly form styles</h2>
204
204
205
205
One thing I am constantly surprised by is how few people complain about how unbelievably useless form elements are out of the box with Tailwind. They literally look awful and you can't do anything about it without writing custom CSS full of weird background-image SVG tricks and worrying about obscure edge cases that require CSS properties you've never heard of before like `color-adjust`.
206
206
@@ -230,7 +230,9 @@ Check out [the @tailwindcss/forms documentation](https://github.com/tailwindlabs
230
230
231
231
---
232
232
233
-
## Default line-heights per font-size
233
+
<h2id="default-line-heights-per-font-size">
234
+
Default line-heights per font-size
235
+
</h2>
234
236
235
237
Every font-size utility in Tailwind now comes paired with a sensible default line-height:
236
238
@@ -274,7 +276,9 @@ Check out the [font size documentation](https://tailwindcss.com/docs/font-size#p
274
276
275
277
---
276
278
277
-
## Extended spacing, typography, and opacity scales
We've extended the default spacing scale to include a bunch of micro values like `0.5`, `1.5`, `2.5`, and `3.5`:
280
284
@@ -315,7 +319,7 @@ Peruse the entire [default config file](https://github.com/tailwindlabs/tailwind
315
319
316
320
---
317
321
318
-
## Use @apply with anything
322
+
<h2id="use-apply-with-anything">Use @apply with anything</h2>
319
323
320
324
By far the most common question I've gotten over the years is "why doesn't `@apply hover:bg-black` work?"
321
325
@@ -333,7 +337,7 @@ Check out [the updated @apply documentation](https://tailwindcss.com/docs/functi
333
337
334
338
---
335
339
336
-
## New text overflow utilities
340
+
<h2id="new-text-overflow-utilities">New text overflow utilities</h2>
337
341
338
342
Up until v2.0, if you wanted to control overflowing text all we really gave you was the fairly heavy-handed `truncate` utility.
339
343
@@ -349,7 +353,7 @@ Check out the new [text overflow documentation](https://tailwindcss.com/docs/tex
349
353
350
354
---
351
355
352
-
## Extend variants
356
+
<h2id="extend-variants">Extend variants</h2>
353
357
354
358
You know what sucks? Wanting to enable `focus-visible` for `backgroundColor` but having to list _every single default variant_ just to add one extra one:
355
359
@@ -381,7 +385,9 @@ module.exports = {
381
385
382
386
---
383
387
384
-
## Group-hover and focus-within by default
388
+
<h2id="group-hover-and-focus-within-by-default">
389
+
Group-hover and focus-within by default
390
+
</h2>
385
391
386
392
One of the things we learned working on [Tailwind UI](https://tailwindui.com/components) is that `group-hover` and `focus-within` aren't nice-to-haves, they're must-haves.
387
393
@@ -397,7 +403,9 @@ Check out [the default variants reference](https://tailwindcss.com/docs/configur
Until now, any time you wanted to add a transition in Tailwind you typically needed to add three classes:
403
411
@@ -441,7 +449,7 @@ Learn more about transitions in the [transition property documentation](https://
441
449
442
450
---
443
451
444
-
## Incompatibility with IE11
452
+
<h2id="incompatibility-with-ie11">Incompatibility with IE11</h2>
445
453
446
454
We've decided to unburden ourselves with caring about IE11 at all, which has allowed us to fully embrace CSS custom properties for [all sorts of crazy stuff](https://adamwathan.me/composing-the-uncomposable-with-css-variables/) and is what makes things like the new `ring` utilities even possible.
0 commit comments