Skip to content

Use Tailwind tokens as CSS variables, SASS map, SASS variables, ES module, JSON & Common JS module.

Notifications You must be signed in to change notification settings

itaditya/tw-universal-tokens

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

19 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Universal Tokens for Tailwind

Many people wish to use Tailwind's hand-crafted design tokens but don't want to adapt Utility CSS approach. This package provides all the tokens as

1. CSS variables

Import the CSS file in your bundle. For webpack this works—

import 'tw-universal-tokens/dist/css/theme.css';

This will add all the Tailwind design tokens on :root. Then just use them in your CSS file—

.card {
  padding: var(--tw-spacing-4) var(--tw-spacing-8);
  min-width: var(--tw-spacing-24);
  background-color: var(--tw-color-green-100);
  border-radius: var(--tw-rounded-md);
  box-shadow: var(--tw-shadow-lg);
}

List of all CSS variables

2. SASS variables

Use the SCSS partial in your SCSS file like this—

@import 'tw-universal-tokens/dist/scss/theme_variables';

.card {
  padding: $tw-spacing-4 $tw-spacing-8;
  min-width: $tw-spacing-24;
  background-color: $tw-color-green-100;
  border-radius: $tw-rounded-md;
  box-shadow: $tw-shadow-lg;
}

List of all SCSS variables

3. SASS map

Use the SCSS partial in your SCSS file like this—

@import 'tw-universal-tokens/dist/scss/theme_map';

.card {
  padding: map-get($tw-tokens, 'spacing-4') map-get($tw-tokens, 'spacing-8');
  min-width: map-get($tw-tokens, 'spacing-24');
  background-color: map-get($tw-tokens, 'color-green-100');
  border-radius: map-get($tw-tokens, 'rounded-md');
  box-shadow: map-get($tw-tokens, 'shadow-lg');
}

Content of the SCSS map

4. ES Module

Import the required tokens from the package—

import { Spacing4, Spacing8, Spacing24, ColorGreen100, RoundedLg, ShadowLg } from 'tw-universal-tokens';

Then use them in style attribute like this—

const regularStyles = {
  padding: `${Spacing4} ${Spacing8}`,
  minWidth: Spacing24,
  backgroundColor: ColorGreen100,
  borderRadius: RoundedMd,
  boxShadow: ShadowLg,
};

<Card style={regularStyles} />

Similarly for CSS in JS libraries do this—

const emotionStyles = css`
  padding: ${Spacing4} ${Spacing8},
  min-width: ${Spacing24},
  background-color: ${ColorGreen100},
  border-radius: ${RoundedMd},
  box-shadow: ${ShadowLg},
`;

<Card css={regularStyles} />

List of all exports in ES module

5. JSON file

A JSON file is also available. In case you need it import from—

"tw-universal-tokens/dist/json/theme.json"

Content of JSON file

About

Use Tailwind tokens as CSS variables, SASS map, SASS variables, ES module, JSON & Common JS module.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published