Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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.
- Host: GitHub
- URL: https://github.com/burnworks/tailwindcss-text-autospace
- Owner: burnworks
- License: mit
- Created: 2023-12-07T03:58:55.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2023-12-07T04:34:44.000Z (about 1 year ago)
- Last Synced: 2024-03-28T10:02:51.705Z (9 months ago)
- Topics: tailwindcss, tailwindcss-plugin
- Language: JavaScript
- Homepage:
- Size: 3.91 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.
## 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',
},
},
},
}
```