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',
      },
    },
  },
}