Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/burnworks/tailwindcss-text-autospace

Tailwind CSS plugin, add text-autospace CSS property.
https://github.com/burnworks/tailwindcss-text-autospace

tailwindcss tailwindcss-plugin

Last synced: about 1 month ago
JSON representation

Tailwind CSS plugin, add text-autospace CSS property.

Awesome Lists containing this project

README

        

# tailwindcss-text-autospace

Tailwind CSS plugin, add text-autospace CSS property.

## Installation

Install the plugin from npm:

```sh
# 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:

```js
/** @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.

```html




```

| 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:

```js
/** @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.

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