Tailwind Variables (tw-variables)

~400 useful, ready-to-import CSS variables generated straight from Tailwind source files.

Copy / Paste

| Source | Type | | --------------------------------------------------------------------------------- | ---------- | | jsDelivr | Minified | | GitHub | Unminified |

Browser Import

All variables including colors:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tw-variables/dist/variables.css" />

One or more subsets:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tw-variables/dist/colors.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tw-variables/dist/size.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tw-variables/dist/sky.css" />

Preflight:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tw-variables/dist/preflight.css" />

Package Manager

Installation

pnpm add -D tw-variables

Import - CSS

All variables (including colors):

import 'tw-variables/variables.css'

One or more subsets:

import 'tw-variables/colors.css'
import 'tw-variables/size.css'
import 'tw-variables/green.css'

Preflight:

import 'tw-variables/preflight.css'

Import - PostCSS

If using PostCSS, you can use this package in conjunction with postcss-jit-props to strip any unused variable from the final CSS:

pnpm add -D postcss postcss-jit-props

const postcssJitProps = require('postcss-jit-props')
const twVariables = require('tw-variables')

module.exports = {
   plugins: [postcssJitProps(twVariables)],
}

Usage

.my-container {
   width: var(--width-full);
   max-width: var(--width-xl);
   z-index: var(--z-10);
   padding: var(--size-4);
   margin: var(--size-6);
   font-family: 'Basier Circle', var(--family-sans);
   font-size: var(--text-base);
   font-weight: var(--font-medium);
   line-height: var(--leading-normal);
   letter-spacing: var(--tracking-tight);
   color: var(--blue-500);
   background-color: var(--slate-500);
   border: var(--border-2) solid var(--blue-500);
   border-radius: var(--radius-2xl);
   box-shadow: var(--shadow-lg);
}

Subsets

| Name | Prefix | Import | Reference | | -------------------------- | ------------------------ | --------------------------------- | --------------------------------------------------------------- | | blur | --blur- | tw-variables/blur.css | Link | | borderRadius | --radius- | tw-variables/border-radius.css | Link | | borderWidth | --border- | tw-variables/border-width.css | Link | | boxShadow | --shadow- | tw-variables/box-shadow.css | Link | | colors | --blue-, --slate-... | tw-variables/colors.css | Link | | dropShadow | --drop- | tw-variables/drop-shadow.css | Link | | fontWeight | --font- | tw-variables/font-weight.css | Link | | fontFamily | --family- | tw-variables/font-family.css | Link | | fontSize | --text- | tw-variables/font-size.css | Link | | letterSpacing | --tracking- | tw-variables/letter-spacing.css | Link | | lineHeight | --leading- | tw-variables/line-height.css | Link | | opacity | --opacity- | tw-variables/opacity.css | Link | | maxWidth | --width- | tw-variables/width.css | Link | | screens | --screen- | tw-variables/screen.css | Link | | spacing | --size- | tw-variables/size.css | Link | | transitionTimingFunction | --easing- | tw-variables/easing.css | Link | | zIndex | --z- | tw-variables/z-index.css | Link |

Colors subsets

Colors reference: Link

| Name | Prefix | Import | | --------- | ------------ | -------------------------- | | amber | --amber- | tw-variables/amber.css | | blue | --blue- | tw-variables/blue.css | | cyan | --cyan- | tw-variables/cyan.css | | emerald | --emerald- | tw-variables/emerald.css | | fuchsia | --fuchsia- | tw-variables/fuchsia.css | | gray | --gray- | tw-variables/gray.css | | green | --green- | tw-variables/green.css | | indigo | --indigo- | tw-variables/indigo.css | | lime | --lime- | tw-variables/lime.css | | neutral | --neutral- | tw-variables/neutral.css | | orange | --orange- | tw-variables/orange.css | | pink | --pink- | tw-variables/pink.css | | purple | --purple- | tw-variables/purple.css | | red | --red- | tw-variables/red.css | | rose | --rose- | tw-variables/rose.css | | slate | --slate- | tw-variables/slate.css | | sky | --sky- | tw-variables/sky.css | | teal | --teal- | tw-variables/teal.css | | violet | --violet- | tw-variables/violet.css | | yellow | --yellow- | tw-variables/yellow.css | | zinc | --zinc- | tw-variables/zinc.css |

Updates

Since the output is generated as expected, for now, I consider this package "complete". I also see no point in updating it everytime Tailwind releases a new version.

Once Tailwind will drop some new tokens that are worth to be added, I'll make sure to include them in a new version of this package.

See also

Open Props by Adam Argyle

License

0BSD