Convert utility classes like flex items-center p-4 bg-blue-500
into real CSS — at runtime, build time, or anywhere JavaScript runs.
import { tws } from 'tailwind-to-style'; const styles = tws('flex items-center gap-4 p-6 rounded-xl bg-white/10 shadow-lg'); // Result: // { // display: "flex", // alignItems: "center", // gap: "1rem", // padding: "1.5rem", // borderRadius: "0.75rem", // backgroundColor: "rgba(255,255,255,0.1)", // boxShadow: "0 10px 15px -3px rgba(0,0,0,0.1), ..." // }
Not a Tailwind replacement — a bridge between Tailwind's class syntax and CSS-in-JS, native, or anywhere you need style objects.
No PostCSS, no Tailwind CLI, no build tools. Pure JavaScript that works everywhere.
Use in the browser via CDN, in Node.js, or bundled. No compilation step required.
Component-style API with nested selectors, hover states, and media queries built in.
Layout, typography, colors, shadows, transforms, animations — the full Tailwind palette.
twsx() can auto-inject generated CSS into a <style> tag. One call, styles applied.
Output style objects that map directly to React Native's StyleSheet.create().
sm:, md:, lg:, xl: breakpoint prefixes — same as Tailwind, converted to @media rules.
hover:, focus:, active:, disabled:, first-child:, and more — all just work.
Need raw CSS? Use @css directive for anything Tailwind classes can't express.
Every element below is styled with Tailwind classes via twsx().
Inspect the source — it's all tws('flex items-center ...').
tws(classes)
Core
Convert a Tailwind class string into a CSS style object. Supports all standard utilities.
tws('p-4 flex gap-2 text-white') // → { padding: "1rem", display: "flex", gap: "0.5rem", color: "#fff" }
twsx(map, options)
Extended
Generate full CSS from a selector → classes map. Supports nesting, pseudo-classes, and @media.
twsx({ '.btn': 'px-4 py-2 rounded-lg font-bold', '.btn:hover': 'bg-white/20 -translate-y-0.5' })
twsx(map, { autoInjectCss })
Auto
Pass autoInjectCss: true and the generated CSS is immediately injected into a <style> tag.
twsx({ '.card': 'p-6 rounded-xl shadow-lg bg-white/10' }, { autoInjectCss: true })
@css { ... }
Escape
Need something Tailwind can't express? Mix raw CSS alongside Tailwind classes using @css.
twsx({ '.hero': [ 'text-center py-20', { '&': '@css { background: linear-gradient(...) }' } ] })
Install in seconds. No config. No build step. Just works.
npm install tailwind-to-style