tailwindcss-text-balance
TypeScript icon, indicating that this package has built-in type declarations

0.2.0 • Public • Published

tailwindcss-text-balance

npm

Adds utilty classes for text-wrap: balance and text-wrap: pretty in Tailwind CSS.

This plugin is intended to act as a stepping stone until tailwindcss supports text-wrap: balance natively. It aims to act as a drop-in for tailwindcss pull request #11320.

See the Chrome Developers Blog for more information about text-wrap: balance in CSS and why it's useful.

Installation

npm install tailwindcss-text-balance

Usage

// tailwind.config.js
module.exports = {
  plugins: [
    require('tailwindcss-text-balance'),
  ],
}

This plugin generates the following utilities when the classes are used:

.text-balance {
    text-wrap: balance;
}

.text-pretty {
    text-wrap: pretty;
}

.text-wrap {
    text-wrap: wrap;
}

.text-nowrap {
    text-wrap: nowrap;
}

Not all browsers support text-wrap: balance yet. You can use the CSS.supports() method to check if the browser supports it before using it.

This plugin does not include a polyfill for text-wrap: balance.

License

This project is licensed under the MIT License.

Contributing

Pull requests are welcome! For major changes, please open an issue first to discuss what you would like to change.

Package Sidebar

Install

npm i tailwindcss-text-balance

Weekly Downloads

19

Version

0.2.0

License

MIT

Unpacked Size

4.16 kB

Total Files

5

Last publish

Collaborators

  • theleoji