# tw-tag

> tw-tag is a library for describing Tailwind CSS as a kind of DSL.

Latest version **0.1.2** (published 2024-04-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install tw-tag
pnpm add tw-tag
yarn add tw-tag
bun add tw-tag
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.2 |
| Published | 2024-04-14 |
| First published | 2023-07-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 13.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | imasanari |

## Links

- npm: https://www.npmjs.com/package/tw-tag
- npm.io page: https://npm.io/package/tw-tag

## Recent versions

- 0.1.2 (latest) — 2024-04-14
- 0.1.1 — 2023-07-10
- 0.1.0 — 2023-07-09

## README

# tw-tag

tw-tag is a library for describing Tailwind CSS as a kind of DSL.

## Usage

```jsx
import { tw } from "tw-tag"

const tailwindClassName = tw`
  flex
  pt-4
  text-center
  rotate-90
`

console.log(tailwindClassName) // 'flex pt-4 text-center rotate-90'

function SomeComponent() {
  return (
    <>
      <div className={tailwindClassName} />
      {/* inline */}
      <div className={tw`pt-4 mx-auto`} />
    </>
  )
}
```

### Use Babel

The tw function converts consecutive spaces into a single space.
You can do this at build time by using the Babel plugin.

```js
// babel.config.js
module.exports = {
  plugins: [
    'tw-tag/babel-plugin',
  ],
}
```

```js
// before
import { tw } from 'tw-tag'

const tailwindClassName = tw`
  flex
  pt-4
  text-center
  rotate-90
`

// after
const tailwindClassName = `flex pt-4 text-center rotate-90`
```

### in TypeScript

If you write ``tw(`...`)``, the type will be inferred based on your input.

```ts
// type: string
const a = tw`
  flex
  pt-4
  text-center
  rotate-90
`

// type: 'flex pt-4 text-center rotate-90'
const b = tw(`
  flex
  pt-4
  text-center
  rotate-90
`)
```

The `` tw`...` `` format will be supported once `TemplateStringsArray` inference is improved.

ref: https://github.com/microsoft/TypeScript/pull/49552

## `tw` support for VSCode

To enable Tailwind CSS IntelliSense completion, add the setting below.

```json5
// settings.json
{
  // ...
  "tailwindCSS.experimental.classRegex": [
    "tw\\(?`([^`]*)"
  ],
}
```

---
_Source: https://npm.io/package/tw-tag · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._