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

Plugins that allow tailwindcss classes to be broken into multiple lines.

Table of Contents

• Vite
• ESBuild
• Usage
• Features
  • Spaces
  • Comments
• Contributing
• License

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

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.