tailwindcss-text-autospace

Tailwind CSS plugin, add text-autospace CSS property.

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