@smastrom/tailwind-variables

Tailwind Variables

~400 useful CSS variables generated straight from Tailwind source files.

Browser

All variables including colors:

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

One or more subsets:

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

Preflight:

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

Pick any import on jsDelivr: Link

Installation

pnpm install -D @smastrom/tailwind-variables

Import - CSS

All variables (including colors):

import '@smastrom/tailwind-variables/variables.css'

One or more subsets:

import '@smastrom/tailwind-variables/colors.css'
import '@smastrom/tailwind-variables/size.css'
import '@smastrom/tailwind-variables/green.css'

Preflight:

import '@smastrom/tailwind-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

Nuxt 3

nuxt.config.ts

import { twVariables } from '@smastrom/tailwind-variables'

export default defineNuxtConfig({
   build: {
      postcss: {
         plugins: {
            'postcss-jit-props': twVariables,
         },
      },
   },
})

Any other framework

postcss.config.cjs

const postcssJitProps = require('postcss-jit-props')
const twVariables = require('@smastrom/tailwind-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-	@smastrom/tailwind-variables/blur.css	Link
borderRadius	--radius-	@smastrom/tailwind-variables/border-radius.css	Link
borderWidth	--border-	@smastrom/tailwind-variables/border-width.css	Link
boxShadow	--shadow-	@smastrom/tailwind-variables/box-shadow.css	Link
colors	--blue-, --slate-...	@smastrom/tailwind-variables/colors.css	Link
dropShadow	--drop-	@smastrom/tailwind-variables/drop-shadow.css	Link
fontWeight	--font-	@smastrom/tailwind-variables/font-weight.css	Link
fontFamily	--family-	@smastrom/tailwind-variables/font-family.css	Link
fontSize	--text-	@smastrom/tailwind-variables/font-size.css	Link
letterSpacing	--tracking-	@smastrom/tailwind-variables/letter-spacing.css	Link
lineHeight	--leading-	@smastrom/tailwind-variables/line-height.css	Link
opacity	--opacity-	@smastrom/tailwind-variables/opacity.css	Link
maxWidth	--width-	@smastrom/tailwind-variables/width.css	Link
screens	--screen-	@smastrom/tailwind-variables/screen.css	Link
spacing	--size-	@smastrom/tailwind-variables/size.css	Link
transitionTimingFunction	--easing-	@smastrom/tailwind-variables/easing.css	Link
zIndex	--z-	@smastrom/tailwind-variables/z-index.css	Link

Colors subsets

Colors reference: Link

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

Updates

Since the output is tested and generated as expected, I consider this package "complete" for now.

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.

Output generated using tailwindcss v3.2.7

See also

Open Props by Adam Argyle

License

MIT