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