Documentation
Getting Started

Get started with twc

Install package

npm i react-twc

Setup autocompletion in your editor

You can enable Tailwind CSS autocompletion inside twc using the steps below:

  1. Install the "Tailwind CSS IntelliSense" Visual Studio Code extension (opens in a new tab)

  2. Add the following to your settings.json (opens in a new tab):

{
  "tailwindCSS.experimental.classRegex": [
    "twc\\.[^`]+`([^`]*)`",
    "twc\\(.*?\\).*?`([^`]*)",
    ["twc\\.[^`]+\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"],
    ["twc\\(.*?\\).*?\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
  ]
}

Create reusable components

Import twc and create a component using twc.div, where div stands to the tag name of the component you want to create.

card.tsx
import { twc } from "react-twc";
 
export const Card = twc.div`rounded-lg border bg-slate-100 text-white shadow-sm`;

Then you can use your component in your app:

import { Card } from "./card";
 
function App() {
  return <Card>Hello world!</Card>;
}
IntroductionasChild prop