Some quick and handy presets for TailwindCSS (>= v2.0.0) that converge the anny Corporate Identity with Tailwind's color scheme, supports dynamic theming using CSS variables and more.
Among the largest change are the custom color utilities for supporting dynamic theming using a given color model: The values of the colors are provided dynamically, and the generated utility classes respect that:
// anny-specific theming defaults
// resorts to functional patterns to make colors dynamic to opacity modifiers from tailwind
module.exports = {
anny: [51, 51, 102], // "#333366"
dark: [19, 19, 51], // "#131333"
neutral: [255, 255, 255], // "#ffffff"
"neutral-muted": [243, 243, 243], // "#f3f3f3"
primary: [43, 106, 248], // "#2b6af8"
"primary-muted": [192, 208, 244], // "#c0d0f4"
secondary: [255, 152, 20], // "#ff9814"
"secondary-muted": [255, 196, 120], // "#ffc478"
};
NOTE that the colors are exported as RGB tuples rather than hex colors or a string! This is done to make the added colors work with Tailwind's opacity modifier. Inside
index.js
, we construct the colors as CSS Color Module 4 color definitions, e.g.,rgb(51 51 51 / --tw-text-opacity)
such that when we use.text-anny-50
, this is resolved correctly to the "anny" color with 50% opacity. This is also the reason why theming in the CMS needs to follow this principle of setting colors as space-separated RGB tuples.
Then, inside your code, you can use the usual Tailwind color classes, e.g.
bg-dark
, text-primary
with the modifiers for the theme model.
The base.js
file adds utility classes for applying the anny Headline font,
namely Gilroy Sans, to any object using the provided utilities, i.e.,
.font-gilroy, .font-gilroy-light, .font-gilroy-semibold, .font-gilroy-bold
, as
well as base styles for h1, h2, h3
.
On the Compnent layer, this package defines a class .full-page
, which is
equivalent to
.full-page {
display: flex;
flex-direction: column;
flex-grow: 1;
}
fade
utilities are an easy way to mask an object using CSS's mask-image
with
linear-gradient
. The following keys provide the mask starting point
const linearMasksStartPoints = {
2: "50%",
3: "66.67%",
4: "75%",
5: "80%",
50: "50%",
60: "60%",
70: "70%",
75: "75%",
80: "80%",
90: "90%",
};
NOTE This is obsolete with Tailwind's JIT feature for arbitrary values as it can be done more easily with e.g.
translate-x-[1.5]
. It remains helpful if you want the explicit class names and to work with autocompletion
transform.js
provides utilities for translation on the interval [-1,1] in
0.1th steps, as well as sale utilities for scaling in [0,2] in 0.1th steps. Use
them for example like this:
<div class="transform translate-x-15/10 scale-8/10"></div>
which moves the 1.5x its width to the right and scales it down by a factor of 0.8.
NOTE: this is done by simply extending the value range in the tailwind.config.js file, thus autocompletion can work with that!