Table of Contents

• Installation
• TypeScript Configuration
• TSUP
• Build
• Usage
• Features
  • Spaces
  • Comments
• Contributing
• License

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>

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))]`

Features

Spaces

Tailwind requires underscores (_) in place of spaces within arbitrary values. With this plugin, you can write spaces directly, and they will be automatically converted to underscores:

<div className="bg-[size:4px 4px]">
  Content
</div>

// Becomes:

<div className="bg-[size:4px_4px]">
  Content
</div>

Comments

The plugin supports /* */ and // comments within multiline class strings:

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

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.