Add post to explains the purpose of Tailwinds in this starter

readme.md

@@ -41,6 +41,7 @@ https://eleventy-excellent.netlify.app/
 - 301 redirects for Netlify _([see blog post](https://eleventy-excellent.netlify.app/blog/post-with-301-redirects/))_
 - Automatically generated Open Graph images for blog posts _([see blog post](https://eleventy-excellent.netlify.app/blog/open-graph-images/))_
 - More features in seperate demo branches _([see blog post](https://eleventy-excellent.netlify.app/blog/demo-pages/))_
+- How Tailwind CSS is used here _([see blog post](https://eleventy-excellent.netlify.app/blog/what-is-tailwind-css-doing-here/))_
 - SEO basics (XML-sitemap, metadata)
 - dayjs handling dates & times
 - Bundling via esbuild

src/posts/2023-11-30-tailwind.md

@@ -0,0 +1,86 @@
+---
+title: 'What is Tailwind CSS doing here?'
+description: 'We are using Tailwinds "engine" to generate utility classes on demand, based on our design tokens. '
+date: 2023-11-30
+---
+
+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).
+
+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.
+
+**Example:**
+
+```js
+{
+	"name": "my custom color name",
+	"value": "pink"
+},
+```
+
+Yo 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:
+
+```js
+backgroundColor: ({theme}) => theme('colors'),
+textColor: ({theme}) => theme('colors'),
+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:
+
+`borderColor: ({theme}) => theme('colors')`
+
+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:
+
+```js
+screens: {
+      md: '50em',
+      lg: '80em'
+    },`
+```
+
+Additionally, you get custom properties based on the naming of your design token files, the prefix is defined in line 77:
+
+```js
+const groups = [
+  {key: 'colors', prefix: 'color'},
+  {key: 'spacing', prefix: 'space'},
+  {key: 'fontSize', prefix: 'size'},
+  {key: 'fontFamily', 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.
+
+{% imagePlaceholder "./src/assets/images/blog/custom-properties.png", "Screenshot of the Firefox dev tools, CSS tab, showing the generated custom properties" %}
+
+You can also create custom utility classes on line 104:
+
+```js
+const customUtilities = [
+  {key: 'spacing', prefix: 'flow-space', property: '--flow-space'},
+  {key: 'colors', prefix: 'spot-color', property: '--spot-color'}
+];
+```
+
+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.
+
+{% imagePlaceholder "./src/assets/images/blog/intellisense.png", "Screenshot in VS Code showing the available flow-space-classes we created, using the Tailwind CSS IntelliSense addon" %}
+
+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/