Tw-variables NPM

GitHub Workflow Status

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.