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
@@ -22,9 +28,9 @@ Tailwind CSS v3.3 is here — bringing a bunch of new features people have been
22
28
-[New line-height modifier:](#new-line-height-shorthand-for-font-size-utilities) Set your font-size and line-height with one class.
23
29
-[CSS variables without the var()](#css-variables-without-the-var): New shorthand syntax for arbitrary values.
24
30
-[Configurable `font-variation-settings`:](#configure-font-variation-settings-for-custom-font-families) Baked directly into your `font-*` utilities.
31
+
-[New `list-style-image` utilities:](#new-list-style-image-utilities) So you can use horrible clip art for bullet points.
25
32
-[New `hyphens` utilities:](#new-hyphens-utilities) For fine-tuning hyphenation behavior.
26
33
-[New `caption-side` utilities:](#new-caption-side-utilities) Title your tables with style.
27
-
-[New `list-style-image` utilities:](#new-list-style-image-utilities) So you can use horrible clip art for bullet points.
28
34
29
35
That covers the most exciting stuff, but check out the [release notes](https://github.com/tailwindlabs/tailwindcss/releases/tag/v3.2.0) for an exhaustive list of every single little improvement we've made since the last release.
30
36
@@ -40,15 +46,18 @@ You can also try out all of the new features on [Tailwind Play](https://play.tai
40
46
41
47
<h2id="extended-color-palette-for-darker-darks">Extended color palette for darker darks</h2>
42
48
49
+
50
+
43
51
- Screenshot (or real demo?) some examples of where this is actually useful, show before and after
44
52
- Sexy dark UI
45
53
- Colored background with colored headline
46
54
55
+
---
56
+
47
57
<h2id="esm-and-typescript-support">ESM and TypeScript support</h2>
48
58
49
-
- Show an example config file, maybe tabbed example with all three formats?
50
-
- Talk about `init` improvements with `--esm` and `--ts` flag, and detecting project type?
51
-
- Talk about how it works? Frame it as "we've hesitated to implement because of this but you wanted it so here it is"
59
+
Now you can configure Tailwind CSS in ESM, or even in TypeScript:
When you run `npx tailwindcss init`, we'll detect if your project is an ES Module and automatically generate your config file with the right syntax.
66
74
67
-
exportdefault {
68
-
content: [],
69
-
theme: {
70
-
extend: {},
71
-
},
72
-
plugins: [],
73
-
} satisfies Config
75
+
You can also generate an ESM config file explicitly by using the `--esm` flag:
76
+
77
+
```sh
78
+
npx tailwindcss init --esm
74
79
```
75
80
81
+
To generate a TypeScript config file, use the `--ts` flag:
82
+
83
+
```sh
84
+
npx tailwindcss init --ts
85
+
```
86
+
87
+
A lot of people assume this is easy because they're writing their own code in ESM already (even if it's being transpiled by their build tool) but it's actually pretty tricky — we literally have to transpile the config file for you on the fly.
88
+
89
+
It's a bit easier to understand why this has to happen when you think of the TypeScript case, because of course Tailwind is distributed as JavaScript, and it can't magically import an uncompiled TypeScript file.
90
+
91
+
We're handling this with the wonderful [jiti](https://github.com/unjs/jiti) library under the hood, and using [Sucrase](https://github.com/alangpierce/sucrase) to transpile the code with the best possible performance while keeping the installation footprint small.
92
+
93
+
---
76
94
77
95
<h2id="simplified-rtl-support-with-logical-properties">Simplified RTL support with logical properties</h2>
78
96
79
-
- Demo of `ps-4` or something, showing the LTR and RTL design side by side
80
-
- Show `pl-4 rtl:pr-4` as the old solution?
97
+
We've made it possible to style multi-directional websites using our [LTR and RTL variants](https://tailwindcss.com/docs/hover-focus-and-other-states#rtl-support) for a while, but now you can use [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties/Basic_concepts) to do most of this styling more easily and automatically.
98
+
99
+
Using new utilities like `ms-3` and `me-3`, you can style the _start_ and _end_ of an element so that your styles automatically adapt in RTL, instead of writing code like `ltr:ml-3 rtl:mr-3`:
<h2id="line-clamp-out-of-the-box">Line-clamp out of the box</h2>
137
+
We've added new logical property utilities for [inset](/docs/top-right-bottom-left), [margin](/docs/margin), [padding](/docs/padding), [border-radius](/docs/border-radius), [scroll-margin](/docs/scroll-margin), and [scroll-padding](/docs/scroll-padding).
138
+
139
+
Here's a full list of all of the new utilities we've added and what they map to:
140
+
141
+
| New class | Properties | Physical counterpart (LTR) |
These should save you a ton of code if you regularly build sites that need to support both LTR and RTL languages, and you can always combine these with the `ltr` and `rtl` variants when you need more control.
<h2id="line-clamp-out-of-the-box">Line-clamp out of the box</h2>
170
+
171
+
We released our [official line-clamp plugin](https://tailwindcss.com/blog/multi-line-truncation-with-tailwindcss-line-clamp) just over two years ago and even though it uses a bunch of weird deprecated `-webkit-*` stuff, it works in every browser and it's going to work forever, so we decided to just bake it into the framework itself.
124
172
125
173
<Examplep="none">
126
174
<divclass="px-4 sm:px-0">
@@ -158,91 +206,108 @@ export default {
158
206
</article>
159
207
```
160
208
209
+
So when you upgrade to v3.3, you can safely remove the line-clamp plugin if you were using it:
161
210
162
-
<h2id="new-line-height-shorthand-for-font-size-utilities">New line-height shorthand for font-size utilities</h2>
211
+
```diff-js tailwind.config.js
212
+
module.exports= {
213
+
// ...
214
+
plugins: [
215
+
-require('@tailwindcss/line-clamp')
216
+
]
217
+
}
218
+
```
163
219
164
-
- Just a code demo, show the diff between the old way and new way
165
-
- While ago introduced color opacity modifier, got to thinking where else could we improve the authoring experience using modifiers?
166
-
- Explain found ourselves literally never changing the line-height without changing the font-size, so why not change them together and use a shorter syntax
So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I <em>was</em> a marine biologist.
So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I <em>was</em> a marine biologist.
So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I <em>was</em> a marine biologist.
187
-
</p>
188
-
</div>
189
-
</div>
190
-
</Example>
222
+
Check out the new [line-clamp documentation](/docs/line-clamp) to learn more about it all works if you haven't played with it before.
191
223
224
+
---
192
225
193
-
```html
194
-
<pclass="**text-base/6** ...">So I started to walk into the water...</p>
195
-
<pclass="**text-base/7** ...">So I started to walk into the water...</p>
196
-
<pclass="**text-base/loose** ...">So I started to walk into the water...</p>
226
+
<h2id="new-line-height-shorthand-for-font-size-utilities">New line-height shorthand for font-size utilities</h2>
227
+
228
+
One thing we've found over years and years of designing beautiful stuff with Tailwind is that we literally _never_ set a line-height without also setting the font-size at the same time.
229
+
230
+
So inspired by our color opacity modifier syntax, we decided to make it possible to save a few characters by setting them together with a single utility:
<h2id="configure-font-variation-settings-for-custom-font-families">Configure <codeclassName="font-[number:inherit] font-[inherit] text-[length:inherit]">font-variation-settings</code> for custom font families</h2>
271
+
That's a pretty cool trick right there for using things like `hover:` with styles that come from the database or something by the way.
216
272
217
-
- Example Inter Display
218
-
- Explain wtf `font-variation-settings` even is, give example of how Inter kinda ships multiple fonts in one file by taking advantage of this feature
219
-
- Now any time you use the `font-sans` utility, your font-variation-settings configuration will automatically be applied.
273
+
---
220
274
221
-
```
222
-
module.exports = {
223
-
theme: {
224
-
fontFamily: {
225
-
sans: [
226
-
'Inter var, sans-serif',
227
-
{
228
-
fontFeatureSettings: '"cv11", "ss01"',
229
-
fontVariationSettings: '"opsz" 32',
230
-
},
231
-
],
275
+
<h2id="configure-font-variation-settings-for-custom-font-families">Configure <codeclassName="font-[number:inherit] font-[inherit] text-[length:inherit]">font-variation-settings</code> for custom font families</h2>
276
+
277
+
When using custom fonts, you'll often want to configure things like `font-feature-settings` or `font-variation-settings` to opt-in to specific tweaks the font offers.
278
+
279
+
We've made it easy to do this for `font-feature-settings` for a while, but now you can do the same thing with `font-variation-settings` by providing a value for it in the sort-of options object you can plop after the font list in your config file:
0 commit comments