wires/hypnagaga_old
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update Tailwind blog post

Browse source
This commit is contained in:
madrilene 2025-01-11 09:18:25 +01:00
parent 10c82c97a2
commit f09ab3e59b
2 changed files with 21 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
src/assets/images/blog/custom-properties.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 244 KiB

After

Width:  |  Height:  |  Size: 187 KiB

50
src/posts/2023/2023-11-30-tailwind.md
View file

@ -12,77 +12,69 @@ I wrote the following explanation quite quickly after hearing several times that
We are using Tailwinds "engine" to generate utility classes on demand, based on our design tokens. We are using Tailwinds "engine" to generate utility classes on demand, based on our design tokens.
If you have a look at the [tailwind.config.js](https://github.com/madrilene/eleventy-excellent/blob/main/tailwind.config.js), you can see how that is done. For example, we are [deactivating Tailwinds default reset](https://github.com/madrilene/eleventy-excellent/blob/main/tailwind.config.js#L67C1-L69C5). If you have a look at the [tailwind.config.js](https://github.com/madrilene/eleventy-excellent/blob/main/tailwind.config.js), you can see how that is done. For example, we are [deactivating Tailwinds default reset](https://github.com/madrilene/eleventy-excellent/blob/main/tailwind.config.js#L72C1-L72C22).
We are hooking into the components layer, to make Tailwind output classes based on our tokens, instead of their default design system. We are hooking into the components layer, to make Tailwind output classes based on our tokens, instead of their default design system.
That is, you are able to use `mt-xs-s` instead of a class like `mt-20` for example. Same goes for colors, depending on the names you defined in your `colors.json`, you get custom classes like `text-primary`. These use the usual Tailwind prefixes. That is, you are able to use `mt-xs-s` instead of a class like `mt-20` for example. Same goes for colors, depending on the namesin your `colors.json`, you get custom classes like `text-pink`. These use the usual Tailwind prefixes ([see docs to learn how to generate colors](/get-started/#design-tokens)).
**Example:** You get a custom property mapped to the color name `--color-my-custom-color-name` _and_ the classes `bg-my-custom-color-name` as well as `text-my-custom-color-name`.
```js
{
"name": "my custom color name",
"value": "pink"
},
```
You get a custom property mapped to the color name `pink`: `--color-my-custom-color-name: pink` _and_ the classes `bg-my-custom-color-name` as well as `text-my-custom-color-name`.
Consider that we limit those utilities in the theme section: Consider that we limit those utilities in the theme section:
```js ```js
backgroundColor: ({theme}) => theme('colors'), backgroundColor: ({theme}) => theme('colors'),
textColor: ({theme}) => theme('colors'), textColor: ({theme}) => theme('colors'),
margin: ({theme}) => ({ margin: ({theme}) => ({ auto: 'auto', ...theme('spacing')}),
auto: 'auto',
...theme('spacing')
}),
padding: ({theme}) => theme('spacing') padding: ({theme}) => theme('spacing')
``` ```
If you want to add the generation for border-color classes for example, you'd have to add that right there: If you want to add the generation for `border-color` classes for example, you'd have to add that right there:
`borderColor: ({theme}) => theme('colors')` `borderColor: ({theme}) => theme('colors')`
Also. you _do_ have something like `md:text-right` available because we define the screens on line 26: Also. you _do_ have something like `md:text-right` available because we define the screens (`src/_data/designTokens/viewports.json`):
```js ```js
screens: { screens: {
md: '50em', ltsm: {max: `${viewportTokens.sm}px`},
lg: '80em' sm: `${viewportTokens.sm}px`,
},` md: `${viewportTokens.md}px`,
navigation: `${viewportTokens.navigation}px`
},
``` ```
Additionally, you get custom properties based on the naming of your design token files, the prefix is defined in line 77: Additionally, you get custom properties based on the naming of your design token files:
```js ```js
const groups = [ const groups = [
{key: 'colors', prefix: 'color'}, {key: 'colors', prefix: 'color'},
{key: 'borderRadius', prefix: 'border-radius'},
{key: 'spacing', prefix: 'space'}, {key: 'spacing', prefix: 'space'},
{key: 'fontSize', prefix: 'size'}, {key: 'fontSize', prefix: 'size'},
{key: 'fontFamily', prefix: 'font'} {key: 'lineHeight', prefix: 'leading'},
{key: 'fontFamily', prefix: 'font'},
{key: 'fontWeight', prefix: 'font'}
]; ];
``` ```
In your dev tools you can see all the generated custom properties + your custom ones from `css/global/variables.css`. In your dev tools you can see all the generated custom properties + your custom ones from `css/global/variables.css`.
They are generated by default. They are generated by default.
{% image "./src/assets/images/blog/custom-properties.png", "Screenshot of the Firefox dev tools, CSS tab, showing the generated custom properties" %} ![Screenshot of the Firefox dev tools, CSS tab, showing the generated custom properties](/assets/images/blog/custom-properties.png)
You can also create custom utility classes on line 104: You can also create custom utility classes:
```js ```js
const customUtilities = [ const customUtilities = [
{key: 'spacing', prefix: 'flow-space', property: '--flow-space'}, {key: 'spacing', prefix: 'flow-space', property: '--flow-space'},
{key: 'colors', prefix: 'spot-color', property: '--spot-color'} {key: 'spacing', prefix: 'region-space', property: '--region-space'},
{key: 'spacing', prefix: 'gutter', property: '--gutter'}
]; ];
``` ```
For example: `{key: 'spacing', prefix: 'gutter', property: '--gutter'}`
If you install the Tailwind CSS IntelliSense addon, you can actually see the classes available to you, including the color preview. If you install the Tailwind CSS IntelliSense addon, you can actually see the classes available to you, including the color preview.
{% image "./src/assets/images/blog/intellisense.png", "Screenshot in VS Code showing the available flow-space-classes we created, using the Tailwind CSS IntelliSense addon" %} ![Screenshot in VS Code showing the available flow-space-classes we created, using the Tailwind CSS IntelliSense addon](/assets/images/blog/intellisense.png)
Read some thoughts that lead Andy Bell to come up with that approach: https://andy-bell.co.uk/i-used-tailwind-for-the-u-in-cube-css-and-i-liked-it/ Read some thoughts that lead Andy Bell to come up with that approach: https://andy-bell.co.uk/i-used-tailwind-for-the-u-in-cube-css-and-i-liked-it/