tw-tag

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

Usage

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.

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

// 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.

// 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.

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