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.
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.
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:**
```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`.
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`.
Consider that we limit those utilities in the theme section:
```js
backgroundColor: ({theme}) => theme('colors'),
textColor: ({theme}) => theme('colors'),
margin: ({theme}) => ({
auto: 'auto',
...theme('spacing')
}),
margin: ({theme}) => ({ auto: 'auto', ...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')`
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
screens: {
md: '50em',
lg: '80em'
},`
ltsm: {max: `${viewportTokens.sm}px`},
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
const groups = [
{key: 'colors', prefix: 'color'},
{key: 'borderRadius', prefix: 'border-radius'},
{key: 'spacing', prefix: 'space'},
{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`.
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
const customUtilities = [
{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.
{% 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/