A Vite plugin that lets you break TailwindCSS classes across multiple lines, great for complex arbitrary values.

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

Table of Contents

• Quick Start
• Options
• Usage
  • JSX
  • Tagged Strings
    • tailwindcss
    • base64Asset
• Features
  • Spaces
  • Comments
• Contributing
• License

Quick Start

import {defineConfig} from 'vite'
import {multilineTailwindCss} from '@borela-tech/vite-plugin-multiline-tailwindcss'

export default defineConfig({
  plugins: [multilineTailwindCss()],
})

Create a root CSS file where Tailwind is imported:

@import "tailwindcss";

And import it in your entry point:

import './index.css'

Options

rootCssPath

Path to your root CSS file where Tailwind is imported. Defaults to src/index.css.

multilineTailwindCss({rootCssPath: 'src/index.css'})

Usage

JSX

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

Tagged Strings

Tags are transformed at build time; the runtime function is never called in production. If a tag isn't processed (the plugin isn't configured for that file), it returns a descriptive error string as a fallback.

tailwindcss

import {tailwindcss} from '@borela-tech/multiline-tailwindcss'

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

// Becomes:
const STYLES = `bg-[linear-gradient(to_right,theme(colors.purple.600),theme(colors.purple.900))] p-4`

base64Asset

import {base64Asset} from '@borela-tech/multiline-tailwindcss'

const NOISE = base64Asset`../assets/noise.png`
// Becomes:
const NOISE = `data:image/png;base64,iVBORw0KGgo...`

Features

Spaces

Tailwind requires underscores (_) in place of spaces within arbitrary values; however, with this plugin you use spaces directly:

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

// Becomes:

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

Comments

/* */ and // comments are supported within multiline class strings:

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

// Becomes:

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

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.