Skip to content

Commit 41b82fc

Browse files
adamwathanadamwathan
committed
Update blog post + gradient docs
1 parent f05afb8 commit 41b82fc

File tree

5 files changed

+131
-77
lines changed

5 files changed

+131
-77
lines changed

‎package-lock.json

Lines changed: 8 additions & 8 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,6 @@
6363
"seedrandom": "^3.0.5",
6464
"simple-functional-loader": "^1.2.1",
6565
"stringify-object": "^3.3.0",
66-
"tailwindcss": "^0.0.0-insiders.b039e71",
6766
"tinytime": "^0.2.6",
6867
"unist-util-visit": "^2.0.3",
6968
"zustand": "^4.0.0-rc.0"
@@ -80,6 +79,7 @@
8079
"eslint-plugin-react": "7.x",
8180
"eslint-plugin-react-hooks": "2.x",
8281
"glyphhanger": "^5.0.0",
83-
"prettier": "^2.5.0"
82+
"prettier": "^2.5.0",
83+
"tailwindcss": "^0.0.0-insiders.3809127"
8484
}
8585
}

‎src/components/Header.js

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@ import { ThemeSelect, ThemeToggle } from './ThemeToggle'
1010

1111
function Featured() {
1212
return (
13-
<Link href="/blog/tailwindcss-v3-2">
13+
<Link href="/blog/tailwindcss-v3-3">
1414
<a className="ml-3 text-xs leading-5 font-medium text-sky-600 dark:text-sky-400 bg-sky-400/10 rounded-full py-1 px-3 hidden xl:flex items-center hover:bg-sky-400/20">
15-
<strong className="font-semibold">Tailwind CSS v3.2</strong>
15+
<strong className="font-semibold">Tailwind CSS v3.3</strong>
1616
<svg
1717
width="2"
1818
height="2"
@@ -23,10 +23,10 @@ function Featured() {
2323
<circle cx="1" cy="1" r="1" />
2424
</svg>
2525
<span className="ml-2 min-[1372px]:hidden">
26-
Dynamic breakpoints, container queries, and more
26+
Extended color palette, ESM/TS support, and more
2727
</span>
2828
<span className="ml-2 hidden min-[1372px]:inline">
29-
Dynamic breakpoints, multi-config, container queries, and more
29+
Extended color palette, ESM/TS support, logical properties, and more
3030
</span>
3131
<svg
3232
width="3"
@@ -147,12 +147,7 @@ export function NavItems() {
147147
</li>
148148
<li>
149149
<Link href="/showcase">
150-
<a className="hover:text-sky-500 dark:hover:text-sky-400">
151-
Showcase
152-
<span className="ml-2 font-medium text-xs leading-5 rounded-full text-sky-600 bg-sky-400/10 px-2 py-0.5 dark:text-sky-400">
153-
New
154-
</span>
155-
</a>
150+
<a className="hover:text-sky-500 dark:hover:text-sky-400">Showcase</a>
156151
</Link>
157152
</li>
158153
</>

‎src/pages/blog/tailwindcss-v3-3/index.mdx

Lines changed: 110 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@ import darkSkyDark from './950-sky-dark.png'
66
import { SnippetGroup } from '@/components/SnippetGroup'
77

88
export const meta = {
9-
title: 'Tailwind CSS v3.3: Extended color palette, ESM support, logical properties, and more',
10-
description: `It's been months in the making but I'm excited to finally release our next website template — Protocol, a beautiful starter kit for building amazing API reference websites.`,
11-
date: '2023-03-27T15:00:00.000Z',
9+
title: 'Tailwind CSS v3.3: Extended color palette, ESM/TS support, logical properties, and more',
10+
description: `Tailwind CSS v3.3 is here — bringing a bunch of new features people have been asking for forever, and a bunch of new stuff you didn't even know you wanted.`,
11+
date: '2023-03-28T14:30:00.000Z',
1212
authors: [adamwathan],
1313
image: card,
1414
}
@@ -28,6 +28,7 @@ Tailwind CSS v3.3 is here — bringing a bunch of new features people have been
2828
- [Extended color palette for darker darks:](#extended-color-palette-for-darker-darks) New darker 950 shades for every color.
2929
- [ESM and TypeScript support:](#esm-and-typescript-support) Write your config file using ESM or TypeScript.
3030
- [Simplified RTL support with logical properties:](#simplified-rtl-support-with-logical-properties) Build layouts that adapt to different directions.
31+
- [Fine-tune gradient color stop positions:](#fine-tune-gradient-color-stop-positions) Specify exactly where you want each color stop to go.
3132
- [Line-clamp out of the box:](#line-clamp-out-of-the-box) Truncate multi-line text without a plugin.
3233
- [New line-height modifier:](#new-line-height-shorthand-for-font-size-utilities) Set your font-size and line-height with one class.
3334
- [CSS variables without the var()](#css-variables-without-the-var): New shorthand syntax for arbitrary values.
@@ -81,7 +82,7 @@ Also pour one out for the 50 shades of gray jokes we used to be able to make.
8182
Now you can configure Tailwind CSS in ESM, or even in TypeScript:
8283

8384

84-
```js {{ filename: 'tailwind.config.js', style: 'framed', color: 'pink' }}
85+
```js {{ filename: 'tailwind.config.js', style: 'framed', color: 'sky' }}
8586
/** @type {import('tailwindcss').Config} */
8687
export default {
8788
content: [],
@@ -160,116 +161,116 @@ We've added new logical property utilities for [inset](/docs/top-right-bottom-le
160161

161162
Here's a full list of all of the new utilities we've added and what they map to:
162163

163-
<div class="-mx-4 overflow-x-auto sm:mx-0">
164-
<div class="inline-block min-w-full align-middle whitespace-nowrap">
164+
<div className="-mx-4 overflow-x-auto sm:mx-0">
165+
<div className="inline-block min-w-full align-middle whitespace-nowrap">
165166
<table>
166167
<thead>
167168
<tr>
168-
<th class="pl-4 sm:pl-0">New class</th>
169+
<th className="pl-4 sm:pl-0">New class</th>
169170
<th>Properties</th>
170-
<th class="pr-4 sm:pr-0">Physical counterpart (LTR)</th>
171+
<th className="pr-4 sm:pr-0">Physical counterpart (LTR)</th>
171172
</tr>
172173
</thead>
173174
<tbody>
174175
<tr>
175-
<td class="pl-4 sm:pl-0"><code>start-*</code></td>
176+
<td className="pl-4 sm:pl-0"><code>start-*</code></td>
176177
<td><code>inset-inline-start</code></td>
177-
<td class="pr-4 sm:pr-0"><code>left-*</code></td>
178+
<td className="pr-4 sm:pr-0"><code>left-*</code></td>
178179
</tr>
179180
<tr>
180-
<td class="pl-4 sm:pl-0"><code>end-*</code></td>
181+
<td className="pl-4 sm:pl-0"><code>end-*</code></td>
181182
<td><code>inset-inline-end</code></td>
182-
<td class="pr-4 sm:pr-0"><code>right-*</code></td>
183+
<td className="pr-4 sm:pr-0"><code>right-*</code></td>
183184
</tr>
184185
<tr>
185-
<td class="pl-4 sm:pl-0"><code>ms-*</code></td>
186+
<td className="pl-4 sm:pl-0"><code>ms-*</code></td>
186187
<td><code>margin-inline-start</code></td>
187-
<td class="pr-4 sm:pr-0"><code>ml-*</code></td>
188+
<td className="pr-4 sm:pr-0"><code>ml-*</code></td>
188189
</tr>
189190
<tr>
190-
<td class="pl-4 sm:pl-0"><code>me-*</code></td>
191+
<td className="pl-4 sm:pl-0"><code>me-*</code></td>
191192
<td><code>margin-inline-end</code></td>
192-
<td class="pr-4 sm:pr-0"><code>mr-*</code></td>
193+
<td className="pr-4 sm:pr-0"><code>mr-*</code></td>
193194
</tr>
194195
<tr>
195-
<td class="pl-4 sm:pl-0"><code>ps-*</code></td>
196+
<td className="pl-4 sm:pl-0"><code>ps-*</code></td>
196197
<td><code>padding-inline-start</code></td>
197-
<td class="pr-4 sm:pr-0"><code>pl-*</code></td>
198+
<td className="pr-4 sm:pr-0"><code>pl-*</code></td>
198199
</tr>
199200
<tr>
200-
<td class="pl-4 sm:pl-0"><code>pe-*</code></td>
201+
<td className="pl-4 sm:pl-0"><code>pe-*</code></td>
201202
<td><code>padding-inline-end</code></td>
202-
<td class="pr-4 sm:pr-0"><code>pr-*</code></td>
203+
<td className="pr-4 sm:pr-0"><code>pr-*</code></td>
203204
</tr>
204205
<tr>
205-
<td class="pl-4 sm:pl-0"><code>rounded-s-*</code></td>
206+
<td className="pl-4 sm:pl-0"><code>rounded-s-*</code></td>
206207
<td><code>border-start-start-radius</code><br /><code>border-end-start-radius</code></td>
207-
<td class="pr-4 sm:pr-0"><code>rounded-l-*</code></td>
208+
<td className="pr-4 sm:pr-0"><code>rounded-l-*</code></td>
208209
</tr>
209210
<tr>
210-
<td class="pl-4 sm:pl-0"><code>rounded-e-*</code></td>
211+
<td className="pl-4 sm:pl-0"><code>rounded-e-*</code></td>
211212
<td><code>border-start-end-radius</code><br /><code>border-end-end-radius</code></td>
212-
<td class="pr-4 sm:pr-0"><code>rounded-l-*</code></td>
213+
<td className="pr-4 sm:pr-0"><code>rounded-l-*</code></td>
213214
</tr>
214215
<tr>
215-
<td class="pl-4 sm:pl-0"><code>rounded-ss-*</code></td>
216+
<td className="pl-4 sm:pl-0"><code>rounded-ss-*</code></td>
216217
<td><code>border-start-start-radius</code></td>
217-
<td class="pr-4 sm:pr-0"><code>rounded-tl-*</code></td>
218+
<td className="pr-4 sm:pr-0"><code>rounded-tl-*</code></td>
218219
</tr>
219220
<tr>
220-
<td class="pl-4 sm:pl-0"><code>rounded-se-*</code></td>
221+
<td className="pl-4 sm:pl-0"><code>rounded-se-*</code></td>
221222
<td><code>border-start-end-radius</code></td>
222-
<td class="pr-4 sm:pr-0"><code>rounded-tr-*</code></td>
223+
<td className="pr-4 sm:pr-0"><code>rounded-tr-*</code></td>
223224
</tr>
224225
<tr>
225-
<td class="pl-4 sm:pl-0"><code>rounded-ee-*</code></td>
226+
<td className="pl-4 sm:pl-0"><code>rounded-ee-*</code></td>
226227
<td><code>border-end-end-radius</code></td>
227-
<td class="pr-4 sm:pr-0"><code>rounded-br-*</code></td>
228+
<td className="pr-4 sm:pr-0"><code>rounded-br-*</code></td>
228229
</tr>
229230
<tr>
230-
<td class="pl-4 sm:pl-0"><code>rounded-es-*</code></td>
231+
<td className="pl-4 sm:pl-0"><code>rounded-es-*</code></td>
231232
<td><code>border-end-start-radius</code></td>
232-
<td class="pr-4 sm:pr-0"><code>rounded-bl-*</code></td>
233+
<td className="pr-4 sm:pr-0"><code>rounded-bl-*</code></td>
233234
</tr>
234235
<tr>
235-
<td class="pl-4 sm:pl-0"><code>border-s-*</code></td>
236+
<td className="pl-4 sm:pl-0"><code>border-s-*</code></td>
236237
<td><code>border-inline-start-width</code></td>
237-
<td class="pr-4 sm:pr-0"><code>border-l-*</code></td>
238+
<td className="pr-4 sm:pr-0"><code>border-l-*</code></td>
238239
</tr>
239240
<tr>
240-
<td class="pl-4 sm:pl-0"><code>border-e-*</code></td>
241+
<td className="pl-4 sm:pl-0"><code>border-e-*</code></td>
241242
<td><code>border-inline-end-width</code></td>
242-
<td class="pr-4 sm:pr-0"><code>border-r-*</code></td>
243+
<td className="pr-4 sm:pr-0"><code>border-r-*</code></td>
243244
</tr>
244245
<tr>
245-
<td class="pl-4 sm:pl-0"><code>border-s-*</code></td>
246+
<td className="pl-4 sm:pl-0"><code>border-s-*</code></td>
246247
<td><code>border-inline-start-color</code></td>
247-
<td class="pr-4 sm:pr-0"><code>border-l-*</code></td>
248+
<td className="pr-4 sm:pr-0"><code>border-l-*</code></td>
248249
</tr>
249250
<tr>
250-
<td class="pl-4 sm:pl-0"><code>border-e-*</code></td>
251+
<td className="pl-4 sm:pl-0"><code>border-e-*</code></td>
251252
<td><code>border-inline-end-color</code></td>
252-
<td class="pr-4 sm:pr-0"><code>border-r-*</code></td>
253+
<td className="pr-4 sm:pr-0"><code>border-r-*</code></td>
253254
</tr>
254255
<tr>
255-
<td class="pl-4 sm:pl-0"><code>scroll-ms-*</code></td>
256+
<td className="pl-4 sm:pl-0"><code>scroll-ms-*</code></td>
256257
<td><code>scroll-margin-inline-start</code></td>
257-
<td class="pr-4 sm:pr-0"><code>scroll-ml-*</code></td>
258+
<td className="pr-4 sm:pr-0"><code>scroll-ml-*</code></td>
258259
</tr>
259260
<tr>
260-
<td class="pl-4 sm:pl-0"><code>scroll-me-*</code></td>
261+
<td className="pl-4 sm:pl-0"><code>scroll-me-*</code></td>
261262
<td><code>scroll-margin-inline-end</code></td>
262-
<td class="pr-4 sm:pr-0"><code>scroll-mr-*</code></td>
263+
<td className="pr-4 sm:pr-0"><code>scroll-mr-*</code></td>
263264
</tr>
264265
<tr>
265-
<td class="pl-4 sm:pl-0"><code>scroll-ps-*</code></td>
266+
<td className="pl-4 sm:pl-0"><code>scroll-ps-*</code></td>
266267
<td><code>scroll-padding-inline-start</code></td>
267-
<td class="pr-4 sm:pr-0"><code>scroll-pl-*</code></td>
268+
<td className="pr-4 sm:pr-0"><code>scroll-pl-*</code></td>
268269
</tr>
269270
<tr>
270-
<td class="pl-4 sm:pl-0"><code>scroll-pe-*</code></td>
271+
<td className="pl-4 sm:pl-0"><code>scroll-pe-*</code></td>
271272
<td><code>scroll-padding-inline-end</code></td>
272-
<td class="pr-4 sm:pr-0"><code>scroll-pr-*</code></td>
273+
<td className="pr-4 sm:pr-0"><code>scroll-pr-*</code></td>
273274
</tr>
274275
</tbody>
275276
</table>
@@ -278,9 +279,67 @@ Here's a full list of all of the new utilities we've added and what they map to:
278279

279280
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.
280281

282+
---
283+
284+
<h2 id="fine-tune-gradient-color-stop-positions">Fine-tune gradient color stop positions</h2>
285+
286+
We've added new utilities like `from-5%`, `via-35%`, and `to-85%` that let you adjust the actual position of each color stop in your gradients:
287+
288+
<svg className="hidden" hidden>
289+
<symbol id="gradient-color-stop" viewBox="0 0 32 34">
290+
<path d="M1 4a4 4 0 0 1 4-4h22a4 4 0 0 1 4 4v19.6a4 4 0 0 1-2.118 3.53L16 34 3.118 27.13A4 4 0 0 1 1 23.6V4Z"/>
291+
<path fill="none" stroke="#000" strokeOpacity=".05" d="M5 .5h22A3.5 3.5 0 0 1 30.5 4v19.6a3.5 3.5 0 0 1-1.853 3.088L16 33.433 3.353 26.688A3.5 3.5 0 0 1 1.5 23.6V4A3.5 3.5 0 0 1 5 .5Z"/>
292+
</symbol>
293+
</svg>
294+
295+
<Example>
296+
<div class="mx-5">
297+
<div class="relative h-[3.625rem]">
298+
<div class="h-12 flex flex-col items-center absolute top-0 left-[10%] -ml-4">
299+
<svg viewBox="0 0 32 34" class="flex-none fill-indigo-500 w-8 drop-shadow">
300+
<use href="#gradient-color-stop" />
301+
</svg>
302+
<div class="mt-2 w-0.5 h-2 bg-gray-900/30 dark:bg-white/30"></div>
303+
<div class="absolute top-0 left-0 w-full h-8 flex items-center justify-center text-[0.6875rem] font-semibold text-white font-mono">10%</div>
304+
</div>
305+
<div class="h-12 flex flex-col items-center absolute top-0 left-[30%] -ml-4">
306+
<svg viewBox="0 0 32 34" class="flex-none fill-sky-500 w-8 drop-shadow">
307+
<use href="#gradient-color-stop" />
308+
</svg>
309+
<div class="mt-2 w-0.5 h-2 bg-gray-900/30 dark:bg-white/30"></div>
310+
<div class="absolute top-0 left-0 w-full h-8 flex items-center justify-center text-[0.6875rem] font-semibold text-white font-mono">30%</div>
311+
</div>
312+
<div class="h-12 flex flex-col items-center absolute top-0 right-[10%] -mr-4">
313+
<svg viewBox="0 0 32 34" class="flex-none fill-emerald-500 w-8 drop-shadow">
314+
<use href="#gradient-color-stop" />
315+
</svg>
316+
<div class="mt-2 w-0.5 h-2 bg-gray-900/30 dark:bg-white/30"></div>
317+
<div class="absolute top-0 left-0 w-full h-8 flex items-center justify-center text-[0.6875rem] font-semibold text-white font-mono">90%</div>
318+
</div>
319+
</div>
320+
<div class="h-10 rounded-lg bg-gradient-to-r from-indigo-500 from-10% via-sky-500 via-30% to-emerald-500 to-90%"></div>
321+
</div>
322+
</Example>
323+
324+
```html
325+
<div class="bg-gradient-to-r from-indigo-500 **from-10%** via-purple-500 **via-30%** to-pink-500 **to-90%** ...">
326+
<!-- ... -->
327+
</div>
328+
```
329+
330+
We've included every value from 0% to 100% in steps of 5 out of the box, but you can of course use arbitrary values to get exactly the effect you want:
331+
332+
```html
333+
<div class="bg-gradient-to-r from-cyan-400 from-[21.56%] ...">
334+
<!-- ... -->
335+
</div>
336+
```
337+
338+
For more details, check out the [gradient color stops documentation](/docs/gradient-color-stops#specifying-stop-positions).
281339

282340
---
283341

342+
284343
<h2 id="line-clamp-out-of-the-box">Line-clamp out of the box</h2>
285344

286345
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.
@@ -338,7 +397,7 @@ One thing we've found over years and years of designing beautiful stuff with Tai
338397

339398
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:
340399

341-
```diff-html {{ filename: 'index.html', style: 'framed', color: 'sky' }}
400+
```diff-html {{ filename: 'index.html', style: 'framed', color: 'indigo' }}
342401
- <p class="**text-lg leading-7** ...">
343402
+ <p class="**text-lg/7** ...">
344403
So I started to walk into the water. I won't lie to you boys, I was terrified. But
@@ -362,7 +421,7 @@ Check out the [font size documentation](/docs/font-size#setting-the-line-height)
362421

363422
In the spirit of typing less, we've also made it possible to omit the `var()` when using a CSS variable as an arbitrary value:
364423

365-
```diff-jsx {{ style: 'framed', filename: 'my-component.jsx', color: 'indigo' }}
424+
```diff-jsx {{ style: 'framed', filename: 'my-component.jsx', color: 'sky' }}
366425
export function MyComponent({ company }) {
367426
return (
368427
<div
@@ -387,7 +446,7 @@ When using custom fonts, you'll often want to configure things like `font-featur
387446

388447
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:
389448

390-
```js {{ filename: 'tailwind.config.js', style: 'framed', color: 'fuchsia' }}
449+
```js {{ filename: 'tailwind.config.js', style: 'framed', color: 'indigo' }}
391450
module.exports = {
392451
theme: {
393452
fontFamily: {

0 commit comments

Comments
 (0)