Migrating from Tailwind CSS

Class-by-class equivalents, a migration plan, and what to do with tailwind.config.js.

1 min readv1

Equivalents#

Tailwind	NibCSS
`flex items-center justify-between gap-4`	`d=flex; ali=center; jsc=space-between; g=16px`
`p-4 px-6 mt-2`	`p=16px; px=24px; mt=8px`
`w-full max-w-screen-lg mx-auto`	`w=100%; mxw=1024px; mx=auto`
`text-sm font-semibold tracking-tight`	`fts=14px; ftw=600; lts=-0.01em`
`bg-indigo-600 text-white`	`bgc=#4F52D9; cl=#fff` (or tokens)
`rounded-xl shadow-md`	`bdrd=12px; bxsh=0 4px 6px -1px rgba(0,0,0,.1)`
`hover:bg-indigo-700`	`hover:bgc=#3A3DBF`
`md:grid-cols-2`	`md:gtc=repeat(2, 1fr)`
`dark:bg-slate-900`	`dark:bgc=#0f172a`
`grid-cols-[200px_1fr]`	`gtc=200px 1fr`
`@apply btn` / component classes	a recipe: `nib="btn"`

Tailwind's defaults are sm 640, md 768, lg 1024, xl 1280, 2xl 1536. Copy them to keep layouts identical:

TypeScript

breakpoints: {
  sm: { min: 640 }, md: { min: 768 }, lg: { min: 1024 }, xl: { min: 1280 }, "2xl": { min: 1536 },
},

Move theme.extend.colors and spacing into tokens; move @layer components classes into components.

Replacing component classes.