Skip to content
This repository was archived by the owner on Feb 14, 2022. It is now read-only.

Commit 40918df

Browse files
adamwathanadamwathan
committed
Add Tailwind v1.9 blog post
1 parent 1d5bb26 commit 40918df

File tree

3 files changed

+216
-0
lines changed

3 files changed

+216
-0
lines changed

‎src/pages/tailwindcss-1-9/card.jpg

42.2 KB
Loading

‎src/pages/tailwindcss-1-9/index.mdx

Lines changed: 211 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,211 @@
1+
import { adamwathan } from '@/authors'
2+
import image from './card.jpg'
3+
4+
export const meta = {
5+
title: 'Tailwind CSS v1.9.0',
6+
description: `We just released Tailwind CSS v1.9 which adds support for configuration presets, useful new CSS grid utilities, extended border radius, rotate, and skew scales, helpful accessibility improvements, and more!`,
7+
date: '2020-10-13T18:30:00.000Z',
8+
authors: [adamwathan],
9+
image,
10+
// discussion: 'https://github.com/tailwindlabs/tailwindcss/discussions/2315',
11+
}
12+
13+
We just released Tailwind CSS v1.9 which adds support for configuration presets, useful new CSS grid utilities, extended border radius, rotate, and skew scales, helpful accessibility improvements, and more!
14+
15+
<!--more-->
16+
17+
Let's dig in to the highlights...
18+
19+
- [Configuration presets](#configuration-presets)
20+
- [Utilities for `grid-auto-columns` and `grid-auto-rows`](#utilities-for-grid-auto-columns-and-grid-auto-rows)
21+
- [Focus indicator improvements and configurable outlines](#focus-indicator-improvements-and-configurable-outlines)
22+
- [Extended border radius, rotate, and skew scales](#extended-border-radius-rotate-and-skew-scales)
23+
- [Upgrading to v1.9](#upgrading)
24+
25+
For the complete summary of changes [check out the release notes on GitHub](https://github.com/tailwindlabs/tailwindcss/releases/tag/v1.9.0).
26+
27+
---
28+
29+
<h2 id="configuration-presets">Configuration presets</h2>
30+
31+
Tailwind CSS v1.9 adds a new `presets` key to the `tailwind.config.js` file that makes it possible to configure a custom "base configuration" for your projects.
32+
33+
```js
34+
// tailwind.config.js
35+
module.exports = {
36+
presets: [require('@my-company/tailwind-base')],
37+
theme: {
38+
extend: {
39+
// Project specific overrides...
40+
},
41+
},
42+
}
43+
```
44+
45+
Whatever you provide under `presets` _replaces_ the default Tailwind base configuration, so you can define your own totally custom starting point. This is really helpful if you're part of a team that works on multiple different Tailwind projects that all need to share the same brand colors, font customizations, or spacing scale.
46+
47+
You can even list multiple presets, which are merged together from top to bottom:
48+
49+
```js
50+
// tailwind.config.js
51+
module.exports = {
52+
presets: [
53+
require('@my-company/tailwind-base'),
54+
require('@my-company/tailwind-marketing'),
55+
],
56+
theme: {
57+
extend: {
58+
// Project specific overrides...
59+
},
60+
},
61+
}
62+
```
63+
64+
The logic to merge your project-specific configuration with your custom base configuration is exactly the same as how things work with the default configuration, so all of the features you're used to like `extend` still work exactly the way you'd expect.
65+
66+
---
67+
68+
<h2 id="utilities-for-grid-auto-columns-and-grid-auto-rows">
69+
Utilities for grid-auto-columns and grid-auto-rows
70+
</h2>
71+
72+
We've added new `gridAutoColumns` and `gridAutoRows` core plugins that add new utilities for the `grid-auto-columns` and `grid-auto-rows` CSS properties respectively.
73+
74+
These utilities let you control the size of implicitly-created grid columns and rows. Use them to set a default column/row size whenever you don't specify a number of columns/rows for your grid.
75+
76+
```html
77+
<div class="grid grid-flow-col auto-cols-max">
78+
<div>1</div>
79+
<div>2</div>
80+
<div>3</div>
81+
</div>
82+
```
83+
84+
Here's a list of the new utilities that are included out of the box:
85+
86+
| Class | CSS |
87+
| ---------------- | ------------------------------------ |
88+
| `auto-cols-auto` | `grid-auto-columns: auto;` |
89+
| `auto-cols-min` | `grid-auto-columns: min-content;` |
90+
| `auto-cols-max` | `grid-auto-columns: max-content;` |
91+
| `auto-cols-fr` | `grid-auto-columns: minmax(0, 1fr);` |
92+
| `auto-rows-auto` | `grid-auto-rows: auto;` |
93+
| `auto-rows-min` | `grid-auto-rows: min-content;` |
94+
| `auto-rows-max` | `grid-auto-rows: max-content;` |
95+
| `auto-rows-fr` | `grid-auto-rows: minmax(0, 1fr);` |
96+
97+
We include `responsive` variants for these utilities by default, and they can be configured just like you'd expect under the `gridAutoColumns` and `gridAutoRows` sections of your `tailwind.config.js` file.
98+
99+
---
100+
101+
<h2 id="focus-indicator-improvements-and-configurable-outlines">
102+
Focus indicator improvements and configurable outlines
103+
</h2>
104+
105+
We've updated the `outline-none` class to render a _transparent_ outline by default instead of rendering _no_ outline. This is really helpful for people who use [Windows high contrast mode](https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/), where custom box-shadow-based focus styles are completely invisible.
106+
107+
Now you can create custom focus styles using box shadows _safely_, without making your sites difficult to use for people with low vision.
108+
109+
```html
110+
<button class="... focus:outline-none focus:shadow-outline">
111+
<!-- ... -->
112+
</button>
113+
```
114+
115+
We've also added two new outline styles: `outline-white` and `outline-black`.
116+
117+
These utilities render a 2px dotted outline in their respective color, with a 2px offset. They work great as general purpose unobtrusive focus indicators that make it easy for keyboard users to see which element on the screen is selected, without clashing too much with your design.
118+
119+
We've included both `white` and `black` variations so you can always be sure to have an option available that has sufficient contrast against whatever background color you're using.
120+
121+
```html
122+
<!-- Use `outline-white` on dark backgrounds -->
123+
<div class="bg-gray-900">
124+
<button class="... focus:outline-white">
125+
<!-- ... -->
126+
</button>
127+
</div>
128+
129+
<!-- Use `outline-black` on light backgrounds -->
130+
<div class="bg-white">
131+
<button class="... focus:outline-black">
132+
<!-- ... -->
133+
</button>
134+
</div>
135+
```
136+
137+
Of course, you're also free to create whatever custom focus styles you like using background colors, box shadows, borders, whatever. These are great if you don't want to get too fancy though.
138+
139+
We've made the `outline` property configurable as well, so you can now define custom outlines in your `tailwind.config.js` file:
140+
141+
```js
142+
// tailwind.config.js
143+
module.exports = {
144+
theme: {
145+
extend: {
146+
outline: {
147+
blue: '2px solid #0000ff',
148+
},
149+
},
150+
},
151+
}
152+
```
153+
154+
You can also provide an `outline-offset` value for any custom outline utilities using a tuple of the form `[outline, outlineOffset]`:
155+
156+
```js
157+
// tailwind.config.js
158+
module.exports = {
159+
theme: {
160+
extend: {
161+
outline: {
162+
blue: ['2px solid #0000ff', '1px'],
163+
},
164+
},
165+
},
166+
}
167+
```
168+
169+
---
170+
171+
<h2 id="extended-border-radius-rotate-and-skew-scales">
172+
Extended border radius, rotate, and skew scales
173+
</h2>
174+
175+
We've added three new border radius utilities by default:
176+
177+
| Class | Value |
178+
| ------------- | ------------------ |
179+
| `rounded-xl` | `0.75rem` _(12px)_ |
180+
| `rounded-2xl` | `1rem` _(16px)_ |
181+
| `rounded-3xl` | `1.5rem`_(24px)_ |
182+
183+
...and an extended set of smaller values for both the `rotate` and `skew` utilities:
184+
185+
| Class | Value |
186+
| ----------- | ------- |
187+
| `rotate-1` | `1deg` |
188+
| `rotate-2` | `2deg` |
189+
| `rotate-3` | `3deg` |
190+
| `rotate-6` | `6deg` |
191+
| `rotate-12` | `12deg` |
192+
| `skew-1` | `1deg` |
193+
| `skew-2` | `2deg` |
194+
195+
Negative versions are included for all of these as well. Super handy for more subtle rotate and skew effects!
196+
197+
---
198+
199+
<h2 id="upgrading">Upgrading</h2>
200+
201+
Tailwind CSS v1.9 is a non-breaking minor release, so to upgrade all you need to do is run:
202+
203+
```bash
204+
# npm
205+
npm install tailwindcss@^1.9
206+
207+
# yarn
208+
yarn add tailwindcss@^1.9
209+
```
210+
211+
We have promoted two previously experimental features (`defaultLineHeights` and `standardFontWeights`) to `future`, so we also recommend [opting-in to those changes now](https://tailwindcss.com/docs/upcoming-changes#default-line-heights-for-font-size-utilities) to simplify the upgrade to Tailwind CSS v2.0 later this fall.

‎src/pages/tailwindcss-1-9/prettier.config.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
printWidth: 80,
3+
singleQuote: true,
4+
semi: false,
5+
};

0 commit comments

Comments
 (0)