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: 10 days ago
JSON representation
Tailwind CSS plugin, add text-autospace CSS property.
- Host: GitHub
- URL: https://github.com/burnworks/tailwindcss-text-autospace
- Owner: burnworks
- License: mit
- Created: 2023-12-07T03:58:55.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-31T12:48:47.000Z (5 months ago)
- Last Synced: 2025-05-20T06:07:10.367Z (about 1 month ago)
- Topics: tailwindcss, tailwindcss-plugin
- Language: CSS
- Homepage:
- Size: 6.84 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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:
```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',
},
},
},
}
```