richtera / lit-tailwinds-test

Tailwind web components starter kit

This is a starter kit to develop web components using Tailwind CSS.

Tailwind and web components do not play well together.

We managed to find a way to make them work without hacks or weird tech: just common technologies combined in a elegant way.

No dependencies, based on lit-element.

Setup

Although the original form of the project suggests pnpm, storybook is not so happy using linked npms.

Please run npm install And then use scripts as npm run <SCRIPT>

Storybook

To use storybook do npm run storybook

How will you create a tailwind component?

Here is a sample code:

import {html} from 'lit';
import {customElement, property} from 'lit/decorators.js';
import {TailwindElement} from '../shared/tailwind.element';

import style from './test.component.scss?inline'; // #1

@customElement('test-component')
export class TestComponent extends TailwindElement(style) { // #2

  @property()
  name?: string = 'World';

  render() {
    return html`
      <p>
        Hello,
        <b>${this.name}</b>
        !
      </p>
      <button class="bg-blue-200 text-yellow-200 p-2 rounded-full text-2xl">Hello world!</button>
    `;
  }
}

It is based on the lit element technology: if you wrote a lit component before, you'll find it familiar.

There are only two differences to a standard LitElement:

1. You must import your styles from a separate file. And this is good for two reasons:
   • it separates the CSS from the logic
   • you can decide to use CSS or SCSS
   • note the ?inline at the end of the file path: if you don't add it, then vite will add the style to the head of the html. If you add it, the style is scoped into the component only
2. the class extends a TailwindElement rather than a LitElement

A TailwindElement extends a LitElmement (see below) and adds the logic to integrate tailwind and your styles.

Get started

To run the project:

1. npm install (only the first time)
2. npm start to run the server
3. to develop the library, run npm build and copy the static assets where you need them.

You may clone this repo and start developing your components by looking at the test.component as reference.

As an alternative, and if you like to have control over every piece, do the following:

1. copy the files in the shared folder:
   • tailwind.element.ts extends LitElement by adding the tailwind support
   • tailwind.global.css includes tha Tailwind base classes into each component
   • globals.d.ts is used to avoid TypeScript errors whe nimporting CSS/Scss files in typescript files (thanks @emaant96)
2. copy the package.json or the devDependencies inside into your own package.json (there are no dependencies)
3. copy postcss.config.js, tailwind.config.js and tsconfig.js

That's all.

Folder structure

Each folder in the src folder will become a published component.

src
  component1
    index.ts
  componrnt2
    index.ts
    styles.scss
    test.stories.ts

The vite build script will automatically update package.json and the vite config to publish each of the components.

Show me the pieces

If you want to understand how it works, it's simple:

• the package.json integrates these technolgies:

"autoprefixer": "^10.4.12",
"postcss": "^8.4.18",
"lit": "^2.4.0",
"tailwindcss": "^3.2.0",
"typescript": "^4.8.4",
"vite": "^3.1.8",
"sass": "^1.55.0"

• vite does almost all the work automatically
• to integrate tailwind, the most important file is in src/shared/tailwind.element.ts

import {LitElement, unsafeCSS} from "lit";

import style from "./tailwind.global.css";

const tailwindElement = unsafeCSS(style);

export const TailwindElement = (style) =>
    class extends LitElement {

        static styles = [tailwindElement, unsafeCSS(style)];
    
    };

It extends a LitElement class at runtime and adds the component tailwind classes.

The style variable comes from your component, where it is imported from an external CSS (or SCSS) file.

Then it is combined with the default tailwind classes.

If you add more components, the common parts are reused.

Who uses it?

We developed this starter kit to implement a web session player for our open source SaaS browserbot.

If you want to contribute or share soem thoughts, just get in touch with us.

Enjoy.