Skip to content
No description, website, or topics provided.
Branch: master
Clone or download
Latest commit 8c4d4f4 Jan 11, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist Init Jan 11, 2018
src Init Jan 11, 2018
.gitignore Init Jan 11, 2018
LICENSE Init Jan 11, 2018
README.md Add readme Jan 11, 2018
index.html
index.js Init Jan 11, 2018
package.json Init Jan 11, 2018
postcss.config.js Init Jan 11, 2018
screenshot.png
tailwind.js Init Jan 11, 2018
webpack.config.js Init Jan 11, 2018
yarn.lock Init Jan 11, 2018

README.md

Using Tailwind CSS for Themeable Interfaces

Screenshot

This is really basic demo showing how you might approach configuring Tailwind CSS if you needed an interface to support multiple themes.

The basic premise is to define your styles in your config file using CSS Custom Properties, and use a more functional/"semantic" naming scheme for your classes.

For example, here's how the text colors are defined in this demo:

config.textColors = {
  'primary': 'var(--color-text-primary)',
  'secondary': 'var(--color-text-secondary)',
  'default': 'var(--color-text-default)',
  'default-soft': 'var(--color-text-default-soft)',
  'inverse': 'var(--color-text-inverse)',
  'inverse-soft': 'var(--color-text-inverse-soft)',
}

Each theme then defines these custom properties inside of their own theme class:

.theme-startup {
    --color-text-primary: #fff;
    --color-text-secondary: #44467b;
    --color-text-default: #373737;
    --color-text-default-soft: #6a6a6a;
    --color-text-inverse: #fff;
    --color-text-inverse-soft: rgba(255, 255, 255, 0.7);
}

.theme-boring {
    --color-text-primary: #fff;
    --color-text-secondary: #755f17;
    --color-text-default: #444;
    --color-text-default-soft: #999;
    --color-text-inverse: #444;
    --color-text-inverse-soft: #999;
}

.theme-elegant {
    --color-text-primary: #fff;
    --color-text-secondary: #927e7e;
    --color-text-default: #373737;
    --color-text-default-soft: #6a6a6a;
    --color-text-inverse: #fff;
    --color-text-inverse-soft: #bbb;
}
You can’t perform that action at this time.