tw-variables

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