tailwindcss-text-autospace

tailwindcss-text-autospace

Tailwind CSS plugin, add text-autospace CSS property.

[!NOTE] With Tailwind CSS v4, you can now define custom properties directly in your CSS file without using any plugins. If you’re working with v4.0 or later, please include the contents of tailwindcss-v4.css.

Installation

Install the plugin from npm:

# Using npm
npm install -D tailwindcss-text-autospace

# Using Yarn
yarn add tailwindcss-text-autospace

Then add the plugin to your tailwind.config.js file:

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require("tailwindcss-text-autospace"),
    // ...
  ],
}

Usage

autospace-{keyword} class to controls spacing between adjacent characters on the same line within the same inline formatting context using a set of character-class-based rules, allowing for automatic control over inter-script spacing and for spacing around punctuation.

<p class="autospace-none ...">
  <!-- ... -->
</p>

Class	Properties
autospace-normal	text-autospace: normal
autospace-none	text-autospace: no-autospace
autospace-insert	text-autospace: insert
autospace-replace	text-autospace: replace
autospace-alpha	text-autospace: ideograph-alpha
autospace-numeric	text-autospace: ideograph-numeric
autospace-punctuation	text-autospace: punctuation
autospace-auto	text-autospace: auto

Note: text-autospace CSS property is currently behind a flag in Chrome. To test it, enable the Experimental Web Platform features flag (found at chrome://flags/#enable-experimental-web-platform-features) in Chrome 120 or later.

Configuration

You can configure which values and variants are generated by this plugin under the textAutospace key in your tailwind.config.js file:

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    textAutospace: {
      'normal': 'normal',
      'no': 'no-autospace',
      'auto': 'auto',
    },
  },
}

Extending the default theme

If you’d like to preserve the default values for a theme option but also add new values, add your extensions under the theme.extend key in your configuration file.

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      textAutospace: {
        'future': 'future_value',
      },
    },
  },
}