Skip to content

Commit

Permalink
Merge remote-tracking branch 'origin/main' into main
Browse files Browse the repository at this point in the history
  • Loading branch information
salvatoreromeo committed Dec 14, 2022
2 parents 7234e8a + 1c73405 commit 552ea78
Showing 1 changed file with 7 additions and 7 deletions.
14 changes: 7 additions & 7 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@

# Tailwind web component starter kit
# Tailwind web components starter kit

This is starter kit to develop web components with tailwind integrated in it.
This is a starter kit to develop web components using Tailwind CSS.

Tailwind and web components do not play well together. Now they do.
Tailwind and web components do not play well together.

We managed to find a way to keep everything really really really simple.
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](https://lit.dev/docs/).

Expand Down Expand Up @@ -37,9 +37,9 @@ export class TestComponent extends TailwindElement(style) { // #2
}
}
```
It is based on the [lit element](https://lit.dev/docs/) technology.
It is based on the [lit element](https://lit.dev/docs/) technology: if you wrote a lit component before, you'll find it familiar.

The only difference to a standard _LitElement_ is that:
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 separate the CSS from the logic
- you can decide to use CSS or SCSS
Expand All @@ -61,7 +61,7 @@ As an alternative, and if you like to have control over every piece, do the foll
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
- _globals.d.ts_ is used to avoid TypeScript errors whe nimporting CSS/Scss files in typescript files (thanks [@emaant96](https://github.com/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_

Expand Down

0 comments on commit 552ea78

Please sign in to comment.