Guidance on using Tailwind CSS alongside the Tecton design system.
Tailwind CSS is a very popular frontend library that has popularized the method of building applications and websites using functional or utility CSS classes.
Tecton has always been a fan of this approach and even provides some of our own that we keep around for legacy purposes. However, we don't have any plans to add to what we offer because doing so would increase everyone's payload. Since Tailwind has solved this problem very well and is so widely used in the industry, we strongly recommend you try Tailwind CSS if you're looking to use more utilities like the ones we provide.
Because theming plays a very big role in Tecton, we understand the desire to have a Tailwind configuration that utilizes the various CSS variables that we provide out of the box. So, we've taken the time to put one together that you can use and customize to your liking!
/** @type {import('tailwindcss').Config} */
module.exports = {
corePlugins: {
// We don't want our default styles overwritten
preflight: false,
},
// Adjust this path to match your project structure
content: ["../templates/**/*.html.jinja2"],
theme: {
extend: {
colors: {
stoplight: {
info: "var(--const-stoplight-info, #0079c1)",
success: "var(--const-stoplight-success, #0e8a00)",
warning: "var(--const-stoplight-warning, #c35500)",
alert: "var(--const-stoplight-alert, #d20a0a)",
},
app: {
white: "var(--app-white, #ffffff)",
black: "var(--app-black, #000000)",
primary: "var(--t-primary, #0079c1)",
secondary: "var(--t-secondary, #b3c2cc)",
tertiary: "var(--t-tertiary, #e8f5fc)",
},
gray: {
1: "var(--t-gray-1, #f9f9f9)",
2: "var(--t-gray-2, #1a1a1a)",
3: "var(--t-gray-3, #262626)",
4: "var(--t-gray-4, #333333)",
5: "var(--t-gray-5, #404040)",
6: "var(--t-gray-6, #4d4d4d)",
7: "var(--t-gray-7, #666666)",
8: "var(--t-gray-8, #808080)",
9: "var(--t-gray-9, #999999)",
10: "var(--t-gray-10, #b3b3b3)",
11: "var(--t-gray-11, #cccccc)",
12: "var(--t-gray-12, #d9d9d9)",
13: "var(--t-gray-13, #e6e6e6)",
14: "var(--t-gray-14, #f2f2f2)",
AAA: "var(--t-a11y-gray-color-AAA, #6c6c6c)",
AA: "var(--t-a11y-gray-color-AA, #949494)",
"AA-active": "var(--t-a11y-active-gray-color-AA, #404040)",
},
primary: {
DEFAULT: "var(--t-primary, #0079c1)",
text: "var(--t-primary-text, #ffffff)",
l1: "var(--t-primary-l1, #008de1)",
l2: "var(--t-primary-l2, #01a0ff)",
l3: "var(--t-primary-l3, #21acff)",
l4: "var(--t-primary-l4, #41b8ff)",
l5: "var(--t-primary-l5, #61c4ff)",
d1: "var(--t-primary-d1, #006dae)",
d2: "var(--t-primary-d2, #00619a)",
d3: "var(--t-primary-d3, #005587)",
d4: "var(--t-primary-d4, #004974)",
d5: "var(--t-primary-d5, #003d61)",
},
secondary: {
DEFAULT: "var(--t-secondary, #b3c2cc)",
text: "var(--t-secondary-text, #141414)",
l1: "var(--t-secondary-l1, #bac9d1)",
l2: "var(--t-secondary-l2, #c2cfd6)",
l3: "var(--t-secondary-l3, #c9d5db)",
l4: "var(--t-secondary-l4, #d1dbe0)",
l5: "var(--t-secondary-l5, #d9e1e6)",
d1: "var(--t-secondary-d1, #9cb0bd)",
d2: "var(--t-secondary-d2, #859ead)",
d3: "var(--t-secondary-d3, #6e8c9e)",
d4: "var(--t-secondary-d4, #5c798a)",
d5: "var(--t-secondary-d5, #4d6473)",
},
tertiary: {
DEFAULT: "var(--t-tertiary, #be8f5fc)",
text: "var(--t-tertiary-text, #141414)",
l1: "var(--t-tertiary-l1, #ebf6fc)",
l2: "var(--t-tertiary-l2, #edf7fd)",
l3: "var(--t-tertiary-l3, #eff8fd)",
l4: "var(--t-tertiary-l4, #f1f9fd)",
l5: "var(--t-tertiary-l5, #f4fafe)",
d1: "var(--t-tertiary-d1, #bee1f6)",
d2: "var(--t-tertiary-d2, #93cef1)",
d3: "var(--t-tertiary-d3, #68baeb)",
d4: "var(--t-tertiary-d4, #3da7e6)",
d5: "var(--t-tertiary-d5, #1c91d6)",
},
"accent-1": {
DEFAULT: "var(--t-accent-1, #e05252)",
l1: "var(--t-accent-1-l1, #e77474)",
d1: "var(--t-accent-1-d1, #b62020)",
},
"accent-2": {
DEFAULT: "var(--t-accent-2, #e09952)",
l1: "var(--t-accent-2-l1, #e7ad74)",
d1: "var(--t-accent-2-d1, #b66b20)",
},
"accent-3": {
DEFAULT: "var(--t-accent-3, #e0e052)",
l1: "var(--t-accent-3-l1, #e7e774)",
d1: "var(--t-accent-3-d1, #b6b620)",
},
"accent-4": {
DEFAULT: "var(--t-accent-4, #99e052)",
l1: "var(--t-accent-4-l1, #ade774)",
d1: "var(--t-accent-4-d1, #6bb620)",
},
"accent-5": {
DEFAULT: "var(--t-accent-5, #52e052)",
l1: "var(--t-accent-5-l1, #74e774)",
d1: "var(--t-accent-5-d1, #20b620)",
},
"accent-6": {
DEFAULT: "var(--t-accent-6, #52e099)",
l1: "var(--t-accent-6-l1, #74e7ad)",
d1: "var(--t-accent-6-d1, #20b66b)",
},
"accent-7": {
DEFAULT: "var(--t-accent-7, #52e0e0)",
l1: "var(--t-accent-7-l1, #74e7e7)",
d1: "var(--t-accent-7-d1, #20b6b6)",
},
"accent-8": {
DEFAULT: "var(--t-accent-8, #5299e0)",
l1: "var(--t-accent-8-l1, #74ade7)",
d1: "var(--t-accent-8-d1, #206bb6)",
},
"accent-9": {
DEFAULT: "var(--t-accent-9, #5252e0)",
l1: "var(--t-accent-9-l1, #7474e7)",
d1: "var(--t-accent-9-d1, #2020b6)",
},
"accent-10": {
DEFAULT: "var(--t-accent-10, #9952e0)",
l1: "var(--t-accent-10-l1, #ad74e7)",
d1: "var(--t-accent-10-d1, #6b20b6)",
},
"accent-11": {
DEFAULT: "var(--t-accent-11, #e052e0)",
l1: "var(--t-accent-11-l1, #e774e7)",
d1: "var(--t-accent-11-d1, #b620b6)",
},
"accent-12": {
DEFAULT: "var(--t-accent-12, #e05299)",
l1: "var(--t-accent-12-l1, #e774ad)",
d1: "var(--t-accent-12-d1, #b6206b)",
},
base: {
DEFAULT: "var(--t-base, #FFFFFF)",
a0: "var(--t-base-a0, rgba(255, 255, 255, 0))",
a1: "var(--t-base-a1, rgba(255, 255, 255, 0.25))",
a2: "var(--t-base-a2, rgba(255, 255, 255, 0.5))",
a3: "var(--t-base-a3, rgba(255, 255, 255, 0.75))",
},
top: {
a0: "var(--t-top-a0, rgba(13, 13, 13, 0))",
a1: "var(--t-top-a1, rgba(13, 13, 13, 0.35))",
a2: "var(--t-top-a2, rgba(13, 13, 13, 0.6))",
a3: "var(--t-top-a3, rgba(13, 13, 13, 0.85))",
},
focus: "var(--const-focus-color, #0066CC)",
text: "var(--t-text, #4d4d4d)",
textA: "var(--t-textA, rgba(77, 77, 77, 0.77))",
},
fontSize: {
base: "var(--app-font-size, 14px)",
small: "var(--app-font-size-small, 12px)",
},
lineHeight: {
base: "var(--app-line-height, 1.428571429em)",
},
opacity: {
disabled: "var(--app-disabled-opacity, 0.4)",
},
spacing: {
"0x": "var(--app-scale-0x, 0px)",
"1x": "var(--app-scale-1x, 5px)",
"2x": "var(--app-scale-2x, 10px)",
"3x": "var(--app-scale-3x, 15px)",
"4x": "var(--app-scale-4x, 20px)",
"5x": "var(--app-scale-5x, 25px)",
"6x": "var(--app-scale-6x, 30px)",
"7x": "var(--app-scale-7x, 35px)",
"8x": "var(--app-scale-8x, 40px)",
"9x": "var(--app-scale-9x, 45px)",
"10x": "var(--app-scale-10x, 50px)",
"11x": "var(--app-scale-11x, 55px)",
"12x": "var(--app-scale-12x, 60px)",
},
borderRadius: {
1: "var(--app-border-radius-1, 3px)",
2: "var(--app-border-radius-2, 6px)",
3: "var(--app-border-radius-3, 12px)",
},
boxShadow: {
1: "var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3))",
2: "var(--app-shadow-2, 0 3px 6px rgba(0, 0, 0, 0.3))",
3: "var(--app-shadow-3, 0 4px 12px rgba(0, 0, 0, 0.3))",
"global-focus": "var(--const-global-focus, 0 0 0 2px var(--const-focus-color, #0066CC)",
"double-focus-ring":
"var(--const-double-focus-ring, 0 0 0 2px var(--t-base, #FFFFFF), 0 0 0 4px var(--const-focus-color, #0066CC))",
},
transitionTimingFunction: {
1: "var(--app-tween-1, 0.2s ease)",
2: "var(--app-tween-2, 0.4s ease)",
3: "var(--app-tween-3, 0.8s ease)",
},
transitionDuration: {
1: "var(--app-duration-1, 0.2s)",
2: "var(--app-duration-2, 0.4s)",
3: "var(--app-duration-3, 0.8s)",
},
},
},
plugins: [],
};
If you're interested, we recommend using the Tailwind CSS IntelliSense VS Code Extension to make finding the right class to choose a breeze.