getting-started.mdx

import { Tab, Tabs } from "nextra-theme-docs"; import { Steps } from "nextra/components";

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:

<Tabs items={["Visual Studio Code", "Neovim", "WebStorm"]}>

1. [Install the "Tailwind CSS IntelliSense" Visual Studio Code extension](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)

2. Add the following to your [`settings.json`](https://code.visualstudio.com/docs/getstarted/settings):

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

1. [Install the extension](https://github.com/neovim/nvim-lspconfig/blob/master/doc/server_configurations.md#tailwindcss)

2. Add the following configuration:

```lua
require 'lspconfig'.tailwindcss.setup({
  settings = {
    tailwindCSS = {
      experimental = {
        classRegex = {
          "twc\\.[^`]+`([^`]*)`",
          "twc\\(.*?\\).*?`([^`]*)",
          { "twc\\.[^`]+\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)" },
          { "twc\\(.*?\\).*?\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)" }
        },
      },
    },
  },
})
```

1. Check the version. Available for [WebStorm 2023.1](https://www.jetbrains.com/webstorm/whatsnew/#version-2023-1-tailwind-css-configuration) and later

2. Open the settings. Go to [Languages and Frameworks | Style Sheets | Tailwind CSS](https://www.jetbrains.com/help/webstorm/tailwind-css.html#ws_css_tailwind_configuration)

3. Add the following to your tailwind configuration

```json
{
  "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.

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>;
}