Installation

npm install -D @borela-tech/esbuild-plugin-multiline-tailwindcss

TypeScript Configuration

To get proper type support for the tailwindcss tagged template literal, add the package to your tsconfig.json:

{
  "compilerOptions": {
    "types": [
      "@borela-tech/esbuild-plugin-multiline-tailwindcss"
    ]
  }
}

TSUP

TSUP will make it easier to build packages that require tailwindcss, you can simply add the plugin to your tsup.config.ts:

import {defineConfig} from 'tsup'
import {multilineTailwindCssPlugin} from '@borela-tech/esbuild-plugin-multiline-tailwindcss'

export default defineConfig(options => {
  return {
    // Other options...
    esbuildPlugins: [multilineTailwindCssPlugin],
    // Other options...
  }
})

Build

After building, a file tailwindcss.candidates.json will be generated which contains the candidates for the tailwindcss classes that were transformed.

This file can then be imported into other projects that use tailwindcss in their css file as follows:

@import "tailwindcss";
@source "../node_modules/some-package/**/tailwindcss.candidates.json";

Usage

The plugin will search for the className attribute in your JSX/TSX files and transform the classes into a single line.

<div className="
  bg-[
    linear-gradient(
      to right,
      theme(colors.purple.600),
      theme(colors.purple.900),
    ),
  ]
">
  <div className="
    bg-[
      linear-gradient(
        to right,
        theme(colors.zinc.900/15%) 1px,
        transparent 1px,
      ),
      linear-gradient(
        to top,
        theme(colors.zinc.900/15%) 1px,
        transparent 1px,
      ),
    ]
    bg-[size:4px 4px]
    p-4
  ">
    Some content
  </div>
</div>

// Becomes:

<div className="bg-[linear-gradient(to_right,theme(colors.purple.600),theme(colors.purple.900))]">
  <div className="bg-[linear-gradient(to_right,theme(colors.zinc.900/15%)_1px,transparent_1px),linear-gradient(to_top,theme(colors.zinc.900/15%)_1px,transparent_1px)] bg-[size:4px_4px] p-4">
    Some content
  </div>
</div>

The parser supports /* */ and // comments within multiline Tailwind class strings. For example:

<div className="
  bg-red-500
  // This is a comment
  text-white
  /* Another comment */
  p-4
">
  Content
</div>

// Becomes:

<div className="bg-red-500 text-white p-4">
  Content
</div>

Alternatively, you can use the tailwindcss tag to transform string literals:

// It is not necessary to import the tailwind tag, it is declared globally and
// the plugin only uses it to know which string literals to transform. This
// function is never called at runtime.

const BODY_CSS = tailwindcss`
  bg-[
    linear-gradient(
      to right,
      theme(colors.purple.600),
      theme(colors.purple.900),
    ),
  ]
`

// Becomes:

const BODY_CSS = `bg-[linear-gradient(to_right,theme(colors.purple.600),theme(colors.purple.900))]`

Contributing

Contributions are welcome! Please open an issue or submit a pull request for any improvements or bug fixes.

License

This project is licensed under the Apache 2.0 License. See the LICENSE file for details.