Tailwind classes in HTML markup don't work

[httpsterio]

Hey!

Loving the starter so far. I really like the approaches you've taken. I've just had a bit of a hard time understanding how some things work as they're not really documented, which is why I'd like to ask how Tailwind works with this starter :)

I'm trying to use some basic Tailwind classes in the HTML markup like px-8 etc. but they're not included with the built CSS. Could you help me understand how Tailwind is setup and customized?

[madrilene]

Hi, sure. Always wanted to write something for that. I'll add a post the starter, but for now:

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, you can see how that is done. For example, we are deactivating Tailwinds default reset with the Preflight plugin. We are hooking into the components layer, to make Tailwind output classes based on our design 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:

    {
      "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:

    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')

Also. you do have something like md:text-right available because we define the screens on line 26:

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:

      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.

You can also create custom utility classes on line 104:

      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.

If you want to 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/

[httpsterio]

Sorry for taking a while to get back to you.

Thank you for this incredibly in-depth reply. I've read it over a few times and I think I finally get it on some level.

I kinda still miss prototyping with the default Tailwind classes, but I can definitely see the benefit of the route you've opted for.

Anything that has come after flexbox is "new" to me so there's a lot of stuff that feels like magic and I can't really grok it all and I keep discovering a lot of cool solutions left and right.

You can close this issue, I thought I had an issue with using the Tailwind styles but really, I just didn't get how you do CSS :)