vite-lit-with-tailwind

v2.1.1

Published

2 years ago

withTailwind decorator for lit in vite

Downloads

0High
0Medium
0Low

vdegenne

lit vite tailwind

vite-lit-with-tailwind

import {withTailwind} from 'vite-lit-with-tailwind';

@customElement('my-element')
@withTailwind()
class MyElement extends LitElement {
  render() {
    return html` <div class="font-bold text-red-500">...</div> `;
  }
}

(DEMO)

Features

Easy to install.
Declarative customizable and easy to use decorator.
Constructed Stylesheets Cache system.
Dark mode System is also supported.

Details

Behind the scene, the decorator only injects tailwind utilities into your custom element:

@tailwind utilities;

So you can use the classes in your template.

Tailwind base styles

Chances that you will want to use your own tailwind base file as the default are high.
You can use the exported method loadTailwindBaseStyles to achieve that:

// early in your code
import {loadTailwindBaseStyles} from 'vite-lit-with-tailwind';
import tailwindBase from './tailwind.css?inline';

await loadTailwindBaseStyles(tailwindBase);

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  p {
    @apply my-9;
  }
  /* ... */
}
/* ... */

@withTailwind() decorator

When used without any arguments the decorator only injects the default tailwind base styles (utilities only) or the one you specified with the method above.
You can pass your element custom styles directly in the decorator, for example

import elementStyles from './my-element-styles.css?inline';

@withTailwind(elementStyles)

It's also possible to use an array of styles if you have different styles to apply.

import elementStyles1 from './my-element-styles1.css?inline';
import elementStyles2 from './my-element-styles2.css?inline';

@withTailwind([elementStyles1, elementStyles2])

Finally if you want to apply a specific tailwind base style to your element you can provide it as a second argument

// ...
import tailwindBase from './tailwind-base.css?inline';

@withTailwind([elementStyles1, elementStyles2], tailwindBase)

(This will override the default tailwind base styles just for the current custom element, no globally.)

Installation

Install this package

npm add -D vite-lit-with-tailwind

Create tailwind config file

Create tailwind.config.js at the root of your project, with this configuration file:

export default {
  content: [
    // change this part to match your files
    'src/**',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Create postcss config file

This file only tells vite to activate postcss (therefore tailwind). Paste this content in postcss.config.js at the root of your project too.

export default {
  plugins: {
    tailwindcss: {},
  },
};

That's about all, now you can use tailwind and the decorator.
If you want to support manual dark mode, keep reading!

"Manual" Dark mode

By default tailwind uses media dark mode, that means classes like dark:x will only work when the user system uses dark mode. That's fine in most of cases, but sometimes you may want to give end-user the choice to select a mode ('light', 'dark', or 'system'), here's how:

First you'll need to add this line in your tailwind.config.js:

darkMode: ['class', ':host(.dark)']; // for dark:x classes in Shadow DOMs

And uses the ThemeManager utility class.

import {ThemeManager} from 'vite-lit-with-tailwind';

ThemeManager.init();
// Calling this method the first time will set the mode to System,
// and will use 'light'/'dark' theme depending on user system setttings.

// You can change the mode at any time
ThemeManager.mode = ThemeManager.MODES.Dark;
ThemeManager.mode = ThemeManager.MODES.Light;
ThemeManager.mode = ThemeManager.MODES.System;

// The mode is saved in the localstorage
// as to keep the state between page refresh.
// Just make sure to call `init()` early when your app loads.

When the theme changes it either adds class="light" or class="dark" on <html> and on all your custom elements using the decorator.

That means, you have to write that:

In the top-level

<style>
  .light {
    ...;
  }
  .dark {
    ...;
  }
</style>

to apply global conditional styles.

And in your custom elements you can use dark:x in template:

class MyElement extends LitElement {
  render() {
    return html` <span class="text-black dark:text-white">Hello</span> `;
  }
}

And you can use these css selectors to apply global conditional styles in your element:

:host {
  @apply bg-gray-100; /* default */
}
:host(.dark) {
  @apply bg-gray-600;
  ...;
}

(note: you can always use :host(.light) to apply rules when class="light" is specifically used on your element)

Limitations

At the moment you can't use tailwind inside css literals.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

vite-lit-with-tailwind

Menu

Features

Details

Tailwind base styles

@withTailwind() decorator

Installation

Install this package

Create tailwind config file

Create postcss config file

"Manual" Dark mode

Limitations

License