https://github.com/konnorrogers/tailwindcss-plugin-custom-elements

A set of tailwind plugins for working with custom element selects such as ::part() and :state()
https://github.com/konnorrogers/tailwindcss-plugin-custom-elements

Last synced: 5 days ago
JSON representation

A set of tailwind plugins for working with custom element selects such as ::part() and :state()

• Host: GitHub
• URL: https://github.com/konnorrogers/tailwindcss-plugin-custom-elements
• Owner: KonnorRogers
• License: mit
• Created: 2024-01-20T21:45:35.000Z (10 months ago)
• Default Branch: main
• Last Pushed: 2024-01-20T21:53:33.000Z (10 months ago)
• Last Synced: 2024-05-01T15:26:49.044Z (7 months ago)
• Language: JavaScript
• Size: 44.9 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Purpose

Make the `::part()` and `::state()` CSS selectors for Shadow DOM easier to work with.

`::part()`: 

`:state()`: 

Here's a primer as to why this is nice:

## Installation

```bash

npm install tailwindcss-plugin-custom-elements

```

## Adding the plugin

```js

import {

  PartPlugin,

  StatePlugin

} from 'tailwindcss-plugin-custom-elements'

export default {

  plugins: [

    PartPlugin(), // Adds `part-[name]:` pseudo-selector

    StatePlugin(), // Adds `state-[name]:` pseudo-selector

  ]

}

```

## Syntax

The basic syntaxes are:

`part-[{{ partName }}]:{{ otherStuff }}`

`state-[{{ stateName }}]:{{ otherStuff }}`

## Example

Here's an example where we set the background-color to `red-500` on a shadow root part with the name of `"base"`,

and then on `:hover`, we change the background color to `blue-500`

```html

  

    


  


```

Generated selectors:

```css

&::part(base).bg-red-500 { background-color: theme("colors.red.500"); }

&::state(valid):bg-green-600 { background-color: theme("colors.green.600"); }

```

## Additional notes

Order matters. If for some reason a part isn't being applied as expected, make sure things are in the correct order.

`::state()` and `::part()` is a pseudo-element and does not accept all possible pseudo-selectors / pseudo-elements.