An easy to use package for creating reusable TailwindCSS components in React.
npm install tailwindcss-componentsAn easy to use package for creating reusable TailwindCSS components in React.
- 🛠Typescript Support
- 📦 Tiny Bundle Size (1.5KB minified, 812B minified + gzipped)
- 💨 Rapid Installation
- 🙂 Easy to Use
I wanted a tool that was easy to use and easy to install so that I could create reusable TailwindCSS components in a clean way with no boilerplate.
Install tailwindcss-components through your favorite package manager.
``
npm install tailwindcss-components
or
yarn add tailwindcss-components
`
Use the twc object to add styles to JSX tags.
`jsx
import twc from "tailwindcss-components"
const Header = twc.h1text-3xl font-semibold text-gray-900my-2 leading-7 text-gray-800
const Text = twc.p
const MyComponent = () => {
return (
Intellisense
You can configure the TailwindCSS Intellisense plugin for VSCode to provide style completion by adding the following to your
settings.json file...`json
"tailwindCSS.experimental.classRegex": ["twc\\.\\w+([^]*)"]
`How it Works
tailwindcss-components simply passes down the style string into the className` prop of the specified JSX tag.