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-variablesImport - 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-propsconst 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