If you like this plugin, give it a star on GitHub and tell about it to your friends!

A Vite plugin that allows tailwindcss classes to be broken into multiple lines.

Vite

Vite Plugin for Vite that allows you to break tailwindcss classes into multiple lines.

ESBuild

This plugin is useful for creating packages — like UI libraries — that depend on tailwindcss. It generates a tailwindcss.candidates.json file, which lists all Tailwind classes used in the package. Other projects can then import this file to ensure those classes are included when generating the final CSS.

Like the Vite plugin, it allows tailwindcss classes to be broken into multiple lines. Works with Tsup or any project that uses esbuild.

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

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.