An example of how you can use Tailwind CSS as the U (utilities) in CUBE CSS.

  • By Andy Bell
  • Last update: Jan 8, 2023
  • Comments: 3

CUBE CSS with Tailwind CSS

⚠️ THIS IS VERY MUCH A PROTOTYPE AND LIKELY BROKEN ⚠️

👀 DEMO: https://cube-css-with-tailwind.netlify.app/ 👀

An example of how you can use Tailwind CSS as the U (utilities) in CUBE CSS. It also uses the following:

  1. Every Layout layouts as compositional layouts (the C in CUBE CSS)
  2. Utopia for fluid type and spacing scales
  3. Post CSS to bundle up CSS files

Why?

I work with clients that like to use Tailwind and I, as part of the consultancy work I do, try to encourage them down the path of a CSS methodology, rather than leaning all-in on a CSS framework.

Tailwind is fantastic at generating utility classes with an easy-to-understand config file, but I find it very limiting and rigid as the entire CSS codebase, so this project uses it how I would ideally use it: purely as the utility generator.

Consider this project diplomacy.

Getting started

  1. Run npm install
  2. Run npm start to spin up a little local server and watch for CSS changes
  3. Run npm build to compress CSS etc

Contributing

No thanks, but if you see something fundamentally wrong (not just your opinions, thanks), then let me know in the issues!

Github

https://github.com/hankchizljaw/CUBE-with-tailwind

Comments(3)

  • 1

    Handle color objects in Tailwind config

    When this is useful:

    {
  dark: {
    DEFAULT: "...",
    muted: "......"
  }
}

    Would produce CSS props like:

    /* VARIABLES GENERATED WITH TAILWIND CONFIG ON 9/20/2022.
    Tokens location: ./tailwind.config.js */

:root {
  --color-dark: #333333;
  --color-neutral: #6e6e6e;
  --color-light: #b5b7b9;
  --color-inverted: #ffffff;
  --color-inverted-hover: #f7f7f7;
  --color-inverted-muted: #f2f2f2;
  --color-negative: #eb5757;
  --color-transparent: transparent;
  --color-current: currentColor;
  --color-primary: #1c488b;
  --color-primary-hover: #153878;
  --color-primary-muted: #e8edf3;
  --color-primary-muted-hover: #d0d7e4;
  --color-accent: #65c3d6;
  --color-accent-hover: #53b5cc;
  --color-success: #2a7a52;
  --color-success-muted: #e3f3ec;
  --color-success-muted-hover: #d4e4dc;
}
  • 2

    fix runtime error with partial-import plugin

    postcss-partial-import throws an error during development because of an PostCSS major version bump, read about it here https://evilmartians.com/chronicles/postcss-8-plugin-migration

    i did some digging and found, it seems like, the only one that is current

  • 3

    Use Tailwind's `resolveConfig` helper to load the final merged/resolved config

    The recommended way of loading Tailwind config programmatically is to use the resolveConfig helper. The reason for this is that in most Tailwind setups, any custom theme config is merged with a set of default config. If we just require the config file directly then we will have access to the custom theme config, but not to any of the default values.

    I realised after mentioning this to @hankchizljaw on Twitter that this isn't as useful as I thought it might be for this repo as the prototype creates a set of config items completely from scratch by providing an empty presets array in the Tailwind config, so there are no default values being used, just the values being explicitly set inside the Tailwind config file.

    Still, it doesn't hurt to load the config this way and it might be useful for others using this repo as an example, or if, in the future, a client removes the presets config item. As an example, this would let them create custom properties for the borderRadius values provided by Tailwind's default theme, even if they didn't have a customised borderRadius object in their Tailwind config file's theme section.

Popular Tag

Related