https://github.com/phucbm/tailwindcss-style-props

A Tailwind CSS plugin that enables easy addition of multiple inline style properties using a custom style utility.
https://github.com/phucbm/tailwindcss-style-props

inline-styles tailwindcss tailwindcss-plugin tailwindv3

Last synced: about 2 months ago
JSON representation

A Tailwind CSS plugin that enables easy addition of multiple inline style properties using a custom style utility.

• Host: GitHub
• URL: https://github.com/phucbm/tailwindcss-style-props
• Owner: phucbm
• License: mit
• Created: 2025-04-28T07:53:43.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2025-04-28T08:16:36.000Z (about 1 year ago)
• Last Synced: 2025-04-28T09:39:11.625Z (about 1 year ago)
• Topics: inline-styles, tailwindcss, tailwindcss-plugin, tailwindv3
• Language: JavaScript
• Homepage:
• Size: 37.1 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# @phucbm/tailwindcss-style-props

[![npm version](https://badgen.net/npm/v/@phucbm/tailwindcss-style-props?icon=npm)](https://www.npmjs.com/package/@phucbm/tailwindcss-style-props)

[![npm downloads](https://badgen.net/npm/dm/@phucbm/tailwindcss-style-props?icon=npm)](https://www.npmjs.com/package/@phucbm/tailwindcss-style-props)

[![npm dependents](https://badgen.net/npm/dependents/@phucbm/tailwindcss-style-props?icon=npm)](https://www.npmjs.com/package/@phucbm/tailwindcss-style-props)

[![github stars](https://badgen.net/github/stars/phucbm/tailwindcss-style-props?icon=github)](https://github.com/phucbm/tailwindcss-style-props/)

[![jsdelivr npm rank](https://badgen.net/jsdelivr/rank/npm/@phucbm/tailwindcss-style-props?icon=npm)](https://www.npmjs.com/package/@phucbm/tailwindcss-style-props)

[![github license](https://badgen.net/github/license/phucbm/tailwindcss-style-props?icon=github)](https://github.com/phucbm/tailwindcss-style-props/blob/main/LICENSE)

[![Made in Vietnam](https://raw.githubusercontent.com/webuild-community/badge/master/svg/made.svg)](https://webuild.community)

A Tailwind CSS plugin that enables easy addition of multiple inline style properties using a custom `style` utility.

## Installation

```bash

# Using npm

npm install @phucbm/tailwindcss-style-props

# Using yarn

yarn add @phucbm/tailwindcss-style-props

# Using pnpm

pnpm add @phucbm/tailwindcss-style-props

```

## Setup

Add the plugin to your `tailwind.config.js` file:

```js

// tailwind.config.js

module.exports = {

  // ...rest of your config

  plugins: [

    require('@phucbm/tailwindcss-style-props'),

    // ...other plugins

  ],

}

```

## Usage

Use the `style` utility to add multiple inline style properties:

```html



  This text will be red with a font-size of 16px





  Using CSS variables





  Complex property values



```


## How it works

The plugin parses the string value provided to the `style` utility by:

1. Splitting the string by semicolons (`;`) to get individual CSS declarations

2. For each declaration, splitting by equals sign (`=`) to get property-value pairs

3. Converting these pairs into a CSS object that Tailwind can apply

## Examples

```html



  Multiple styles applied





  Only applies on medium screens and up





  Changes on hover





  Combined with standard Tailwind utilities



```


## Notes

- Use equals sign (`=`) instead of colons (`:`) to separate property and value

- Use semicolons (`;`) to separate multiple style declarations

- For complex values with spaces, use underscores (`_`), which will be interpreted as spaces

## License

MIT