https://github.com/rktjmp/tailwindcss-phx-live
Phoenix LiveView variants for TailwindCSS
https://github.com/rktjmp/tailwindcss-phx-live
Last synced: 6 months ago
JSON representation
Phoenix LiveView variants for TailwindCSS
- Host: GitHub
- URL: https://github.com/rktjmp/tailwindcss-phx-live
- Owner: rktjmp
- License: mit
- Created: 2021-03-08T12:10:56.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2021-12-23T17:20:56.000Z (almost 4 years ago)
- Last Synced: 2025-03-29T04:04:52.936Z (6 months ago)
- Language: JavaScript
- Size: 14.6 KB
- Stars: 9
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
TailwindCSS-Phx-Live
===
`tailwindcss-phx-live` is a TailwindCSS plugin that provides variants for Phoenix LiveView's `phx-*-loading` events/css-classes.
[github.com/rktjmp/tailwindcss-phx-live](https://github.com/rktjmp/tailwindcss-phx-live)
[npmjs.com/package/tailwindcss-phx-live](https://www.npmjs.com/package/tailwindcss-phx-live)
Variants
---
- `phx-click`
- `phx-change`
- `phx-submit`
- `phx-focus`
- _Note: tailwind already has focus variants!_
- `phx-blur`
- `phx-keydown`
- Applies to both `phx-keydown` and `phx-window-keydown`.
- `phx-keyup`
- Applies to both `phx-keyup` and `phx-window-keyup`.
- `phx-connected`
- `phx-loading`
- `phx-error`
Usage
---
You can use the variants on the "root" element or any child.
```html
```
```html
![]()
````
Configuration
---
Refer to tailwinds documentation, but roughly:
```js
module.exports = {
variants: {
extend: {
opacity: ['phx-click'],
backgroundColor: ['phx-click', 'phx-submit'],
},
},
plugins: [
require('tailwindcss-phx-live')
],
}
```