A simple setup to use LitElement with tailwindcss for your web components projects
Tags: development, webcomponents, lithtml
Published: 2021-02-05 08:35:45

---
title: A simple setup to use LitElement with tailwindcss for your web components projects
published: true
date: 2021-02-04 14:35:30 UTC
tags: development,webcomponents,lithtml
canonical_url: https://lengrand.fr/a-simple-setup-to-use-litelement-with-tailwindcss-for-small-projects/
---

 ![A simple setup to use LitElement with tailwindcss for small projects](https://images.unsplash.com/photo-1472437774355-71ab6752b434?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MXwxMTc3M3wwfDF8c2VhcmNofDN8fGNzc3xlbnwwfHx8&ixlib=rb-1.2.1&q=80&w=1080)

**TL;DR : To use tailwind in your LitElement based project, you can simply import the CSS file and disable shadow DOM.**

For my latest [side project](https://twitter.com/jlengrand/status/1354097635620229122), I needed to create a small UI. I decided to build it using Web Components, but because I really suck at CSS I wanted to use [tailwindcss](https://tailwindcss.com/) to sort out all the details for me.

<!--kg-card-begin: image-->

![A simple setup to use LitElement with tailwindcss for small projects](https://lengrand.fr/content/images/2021/02/image-6.png)<figcaption>A photo of my latest side project : An e-paper dashboard for the family</figcaption>

<!--kg-card-end: image-->

Turns out, if you import the css file in your main HTML file it won't work, because the shadow DOM of your components will prevent the propagation of the CSS properties. However, [Pascal](https://twitter.com/passle_) was nice enough to show me an easy way around it.

## Setting up the project

Creation a new Web Components based application is easy enough with the generators provided by [open-wc](https://open-wc.org/).

Simply run `npm init @open-wc` and follow the setup, or use one of the already available generators. I decided to go with Typescript and call my application `tailwind-app` so here is mine :

<!--kg-card-begin: image-->

![A simple setup to use LitElement with tailwindcss for small projects](https://lengrand.fr/content/images/2021/02/image-7.png)

<!--kg-card-end: image-->

You will end up with a simple and visual working application that we can pimp.

<!--kg-card-begin: image-->

![A simple setup to use LitElement with tailwindcss for small projects](https://lengrand.fr/content/images/2021/02/image-8.png)<figcaption>Default webapp after running the open-wc generator</figcaption>

<!--kg-card-end: image-->
## Adding tailwindcss to the mix

There are many ways to install tailwindcss, as indicated by their [installation](https://tailwindcss.com/docs/installation) page. To keep my build step simple, I decided to use the `npx` method but this is not a requirement.

Run the following command once to generate a tailwind.css file: `npx tailwindcss-cli@latest build -o tailwind.css`. For good measure, I added it as an extra command in my package.json file.

Then, add the link to the stylesheet in your html file :

<!--kg-card-begin: image-->

![A simple setup to use LitElement with tailwindcss for small projects](https://lengrand.fr/content/images/2021/02/image-9.png)

<!--kg-card-end: image-->
## Disabling shadow DOM in your application

To create a Web Component without a ShadowRoot while using LitElement, you have to plug into the [createRenderRoot](https://lit-element.polymer-project.org/guide/templates#renderroot) method. In order to do this for all of our elements, we are going to create a default new element that we will extend from. I decided to call it `YoloLitElement` for reasons we will discuss in the conclusion.

<!--kg-card-begin: image-->

![A simple setup to use LitElement with tailwindcss for small projects](https://lengrand.fr/content/images/2021/02/image-10.png)<figcaption>Our root element that we will expand on. It is an empty element whose createRenderRoot method returns himself.</figcaption>

<!--kg-card-end: image-->

Now to create new elements, we can extend from that element. Here is a small example recreating the default footer from the Open-WC generator :

<!--kg-card-begin: image-->

![A simple setup to use LitElement with tailwindcss for small projects](https://lengrand.fr/content/images/2021/02/image-11.png)<figcaption>The default app footer, using tailwindcss classes instead of CSS</figcaption>

<!--kg-card-end: image-->
## Word of caution

This method does not come without its drawbacks. The first thing that happens when you implement this in all of your app is that the inline css will not work as intended any more. Here is the same app as shown above once disabling shadow root:

<!--kg-card-begin: image-->

![A simple setup to use LitElement with tailwindcss for small projects](https://lengrand.fr/content/images/2021/02/image-12.png)<figcaption>The application after activating tailwindcss. Half the css is not working any more</figcaption>

<!--kg-card-end: image-->

**What this means is that this method should only be used if you want to implement a full application that will not depend on other components, nor be used by other components**. It is _not_ a recommended method to create reusable components.

However, it has its benefits as well. In my case, for a side-project, it allows me to quickly create my interface and benefit from the power of tailwind in a quick and easy way.

If you want to have a look at the complete setup used in this article, you can check [this repository on GitHub](https://github.com/jlengrand/tailwind-app).

Take care! If you have thoughts or questions, **you can find me [on Twitter](https://twitter.com/jlengrand/).** And once more, I wanna thank Pascal for showing me that method, and helping me to solve all of my Web Components related problems in general. Check him out, he writes blogs **[over there](https://dev.to/thepassle)**.