Getting started

use-styled offers a powerful and flexible variant API for React and React Native, allowing you to elegantly combine inline styles, TailwindCSS classes, or NativeWind v4 classes.

Installation

---

To use use-styled in your project, follow the steps below.

npm

npm install use-styled

yarn

yarn add use-styled

pnpm

pnpm add use-styled

bun

bun add use-styled

IntelliSense setup (optional)

---

To get Tailwind CSS IntelliSense autocompletion in the className properties of your configuration object, add the following to your VS Code / Cursor settings:

{
  "tailwindCSS.experimental.classRegex": [
    [
      "((?:useStyled)(?:[\\.a-zA-Z0-9]*)?\\((?:[^)(]|\\((?:[^)(]|\\((?:[^)(]|\\([^)(]*\\))*\\))*\\))*\\))",
      "className\\s*:\\s*'(.*?)'"
    ]
  ]
}

This will enable autocompletion and syntax highlighting for Tailwind classes within the className properties of your styled components.