https://github.com/joshnuss/svelte-preprocess-tailwind

Preprocess tailwind expressions with Svelte
https://github.com/joshnuss/svelte-preprocess-tailwind

rollup svelte tailwindcss

Last synced: 25 days ago
JSON representation

Preprocess tailwind expressions with Svelte

• Host: GitHub
• URL: https://github.com/joshnuss/svelte-preprocess-tailwind
• Owner: joshnuss
• Created: 2020-02-28T03:38:56.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2022-12-05T10:46:36.000Z (almost 2 years ago)
• Last Synced: 2024-04-14T03:14:25.995Z (7 months ago)
• Topics: rollup, svelte, tailwindcss
• Language: JavaScript
• Homepage:
• Size: 736 KB
• Stars: 5
• Watchers: 3
• Forks: 0
• Open Issues: 6
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Tailwind Preprocess for Svelte.js

**This is a prototype**

A preprocessor that helps organize Tailwind styling.

# Setup

```javascript

import preprocessTailwind from 'svelte-preprocess-tailwind'

// add as a markup preprocessor in svelte plugin config

svelte({

  preprocessor: {

    markup: preprocessTailwind

  }

  ....

})

```

# Examples

## Attributes

Instead of using classes, you can use attributes:

```html





```

## Groups

Multiple classes of the same modifier (`hover`, `focus`) or breakpoint (`sm`, `md`, `lg`, `xl`) can be grouped together using brackets:

```html





```

## Attribute conditions

Conditions can be added to any attribute:

```html





```


## Group conditions

Conditions can be added to an entire group of attributes in one shot:

```html

















```

# License

MIT