Source Foundation / Tailwind CSS

Get started

Install packages

npm i -D source-foundation-cli
npm i -D source-tailwindcss

Learn more about Source Foundation CLI →

Create source.config.json

npx source-css init

Run the command above to create your ./source.config.json. This file has the parameters to generate colour palettes, typography, radii and spacing tokens.

Learn more about source.config.json →

Create CSS variables

npx source-css ./css/variables.css

The command above will read your ./source.config.json and create the CSS file ./css/variables.css.

See default CSS variables →

Import CSS variables

main.css

@import "./css/variables.css";
...
@tailwind base;
@tailwind components;
@tailwind utilities;

Configure TailwindCSS

Option 1. Import preset

tailwind.config.js

module.exports = {
    theme: { ... },
    ...
    presets: [
        require('source-tailwindcss')
    ]
}

Import a single Source Preset to enable all the features in the most simple way

Learn more about Tailwind CSS presets →

Option 2. Use theme

tailwind.config.js

module.exports = {
    theme: require('source-tailwindcss/source-theme'),
    plugins: [
        require('source-tailwindcss/plugins/border'),
        require('source-tailwindcss/plugins/colors'),
        require('source-tailwindcss/plugins/components'),
        require('source-tailwindcss/plugins/elevation'),
        require('source-tailwindcss/plugins/gradients'),
        require('source-tailwindcss/plugins/icons'),
        require('source-tailwindcss/plugins/padding')
    ]
}

Theme gives you more control over plugins.

Learn more about Tailwind CSS themes →

Set up HTML

index.html

<html data-theme="light" data-radii="base" data-spacing="base" data-typography="base" data-icons="base">
    ...
</html>

All the values are set with [data] atribute that you can apply to any element in your app.

[data] attribute variants

theme

light

dark-elevated

dark-base

spacing

compact

base

large

typography

compact

base

large

radii

compact

base

large

icons

base

touch

Now you shuld be able to run your build normally

Colour System

Colour system delivers seamless dark mode using CSS custom properties (a.k.a. variables). Source Design System completely replaces Tailwind colours with Source colours. It uses plugins to support CSS variables integration with Tailwind utility classes.

Learn more about Source Colour System →

Neutrals

Neutral colours are the foundation for the visual language that defines the overall tone of your application. It could be fully desaturated, slightly colder or warmer, or even tinted in a fancy way to support the brand.

Fills

Fills are the lightest shades in your arsenal and should be used as the main background colours.

Light surface colours

100

200

300

400

500

600

Dark surface colours

100

200

Alt or alternative colours are semi-transparent ones and could be applied both as fills and strokes.

Light surface tints

100

200

300

400

500

600

Dark surface tints

100

200

300

400

500

600

Primary / Brand Colour

Brand colour is key to the immediate brand recognition of your product

100

200

For the text, there are three shades for visual hierarchy and several colours for semantics. It is an independent sub-palette that makes it easier to fit into WCAG accessibility requirements.

Semantics are derived from accents. Shade 500 is for light backgrounds and shade 600 is for dark backgrounds.

Text on light background

--text-base-600

--text-base-500

--text-base-400

--text-base-action

--text-base-info

--text-base-success

--text-base-warning

--text-base-danger

Text on dark background

--text-contrast-600

--text-contrast-500

--text-contrast-400

--text-contrast-action

--text-contrast-info

--text-contrast-success

--text-contrast-warning

--text-contrast-danger

Accents

The accent palette brings life and meaning to your product. The colour spots can guide user attention, emphasise brand connection or communicate a system state. There are ten accents to work with.

100

200

300

400

500

600

100

200

300

400

500

600

100

200

300

400

500

600

100

200

300

400

500

600

100

200

300

400

500

600

100

200

300

400

500

600

100

200

300

400

500

600

100

200

300

400

500

600

100

200

300

400

500

600

100

200

300

400

500

600

Colour Adjustments

Colour opacity

Colour opacity is adjusted with color-mix() function

.bg-opacity-90 {
    background-color: color-mix(in srgb, var(--bg-color), transparent 10%);
}
.border-opacity-90 {
    border-color: color-mix(in srgb, var(--border-color), transparent 10%);
}
.color-opacity-90 {
    color: color-mix(in srgb, var(--text-color), transparent 10%);
}

bg-opacity-90

bg-opacity-80

bg-opacity-70

bg-opacity-60

bg-opacity-50

color-opacity-90

color-opacity-80

color-opacity-70

color-opacity-60

color-opacity-50

Colour tint

Colour tint adds a linear gradient with two semitransparent white colour stops.

.tint-30 {
    background-image: linear-gradient(180deg, hsla(0deg 0% 100% / 30%), hsla(0deg 0% 100% / 30%));
}

tint-10

tint-20

tint-30

tint-40

tint-50

Background Blend Mode

tint-10

tint-20

tint-30

tint-40

tint-50

Colour shade

Colour shade adds a linear gradient with two semitransparent black colour stops.

.shade-30 {
    background-image: linear-gradient(180deg, hsla(0deg 0% 0% / 30%), hsla(0deg 0% 0% / 30%));
}

shade-10

shade-20

shade-30

shade-40

shade-50

Background Blend Mode

shade-10

shade-20

shade-30

shade-40

shade-50

Gradients

Gradient Tint

Tint gradient makes a gradient on top of any colour using background-blend-mode: overlay By default it creates tint on top of the surface, you can change gradient angle with gradient-angle

Examples below demonstrate gradient-tint-50 on top of different accents

gradient-angle-180

gradient-angle-135

gradient-angle-90

gradient-angle-45

gradient-angle-0

Gradient Shade

There is another utility that shades part of the surface. Examples below demonstrate gradient-shade-50 on top of different accents.

gradient-angle-0

gradient-angle-45

gradient-angle-90

gradient-angle-135

gradient-angle-180

Gradient Mix

This utility makes a gradient using specific colour. Examples below demonstrate the mix of two accents.

gradient-angle-0

gradient-angle-45

gradient-angle-90

gradient-angle-135

gradient-angle-180

Also you can use them with icons

Shadows

Drop Shadows

Shadow utility offers six elevation levels. examples below use shadow-utility-shade-300 colour.

shadow-1

shadow-2

shadow-3

shadow-4

shadow-5

inner-shadow-1

inner-shadow-2

inner-shadow-3

inner-shadow-4

Combine Drop & Inner Shadows

Special utility class shadows combines both drop and inner shadows

inner-shadow-2 shadow-3

inner-shadow-2 shadow-2

inner-shadow-4 shadow-4

Spacing

Primary spacing scale. Use for evenly spaced containers or pair with minor value for optically balanced results

--spacing-xs4

--spacing-xs3

--spacing-xs2

--spacing-xs

--spacing-sm

--spacing-base

--spacing-md

--spacing-lg

--spacing-xl

--spacing-xl2

--spacing-xl3

--spacing-xl4

--spacing-xl5

Additional spacing scale. Use for vertical spacing and pair with primary value for optically balanced results

--spacing-minor-xs4

--spacing-minor-xs3

--spacing-minor-xs2

--spacing-minor-xs

--spacing-minor-sm

--spacing-minor-base

--spacing-minor-md

--spacing-minor-lg

--spacing-minor-xl

--spacing-minor-xl2

--spacing-minor-xl3

--spacing-minor-xl4

--spacing-minor-xl5