Lit-element: Example of Tailwindcss integration ?

[jrabary]

I'm looking for example of demo showing the usage of Tailwindcss with LitElement. At least how should we proceed ?

[QuinsZouls]

I adapted the tailwindcss styles to work with lit-element, you can use the port here

[lkraav]

I adapted the tailwindcss styles to work with lit-element, you can use the port here

Ouch, that's a 755 kB stylesheet. I'm pretty sure there needs to be a more elegant way of doing this integration so it'd make sense.

[web-padawan]

AFAIK, Tailwindcss is a CSS framework based on utility classes. So the answer is basically the same as for "how to use Bootstrap with Polymer" (on of the most asked questions in the past).

If you rely on global CSS, you probably don't want to use shadow DOM at all. Then you can opt out via createRenderRoot - as long as your components don't have <slot>.

Personally I don't recommend to use Tailwind, unless you are absolutely sure it's what you need.

[lkraav]

Wouldn't there be use for a minimal utility class set of some kind to provision consistency across UI framework elements shadow templates? I haven't really performed a thought excercise on whether CSS custom properties could solve 100% or less of the that surface.

[jrabary]

I'm using the same approach as @QuinsZouls as a workaround but in fact it is not efficient. Furthermore, there are some caveat. For example css function doesn't handle expression with \ inside as in

.w-2\/3 {
  width: 66.666667%;
}

Tailwindcss is based on postcss and maybe a better approach is to call postcss inside the css function. Is it something that lit-element can handle ?

[jrabary]

Personally I don't recommend to use Tailwind, unless you are absolutely sure it's what you need.

I find it very easy to style application with Tailwind. If there's an alternative that is as easy to use for non css expert I'm interested.

[blikblum]

Disable shadow dom. Is not really necessary if you know how to use CSS.

Here's an example of a LitElement app without shadow dom: https://github.com/blikblum/lit-element-mobx-realworld-example-app

[davidsteinberger]

Here's how I use it (with shadow-dom). In my package.json I usually have tasks like this:

"styles": "NODE_ENV=production node css-to-js.js",
"styles:watch": "node css-to-js.js",
"dev": "yarn styles:watch & yarn tsc -w & yarn start",
"build": "yarn styles; yarn tsc; webpack --mode=production",
"start": "es-dev-server --app-index index.html --node-resolve --open --watch",

Here's a link to a sample css-to-js.js
It looks for css-files that in tailwind will typically start with

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

and processes those into css literals with a .css.ts extension. While in dev you get huge files but during build @fullhuman/postcss-purgecss will limit it to only what you use in your component (identified via grepping through the comp code (same name but .ts extension) thus tiny).
You don't have to use typescript but I do.
In the component you can then simple import and use it:

import Styles from './MyTabs.css'; // Note that I omit the extension; TS is processed to JS and you don't need the extension in the import
@customElement('my-tabs')
export class Tabs extends LitElement {
  static styles = Styles;

  ...
}

[jrabary]

@davidsteinberger This works great. Thanks.

[justinfagnani]

I'm not sure this is a very actionable issue beyond the responses already here. I suppose we can add a CSS framework integration tips section to the docs at some point. cc @arthurevans

[skortchmark9]

Just attempted to use the <link rel="stylesheet" href="..../foo.css"> per https://lit-element.polymer-project.org/guide/styles#external-stylesheet and it doesn't really work - it looks like it re-fetches the stylesheet and reapplies the styles on every load of the component. (It's in a drawer and conditional). Note also the demo there appears to be broken.

It seems like the best solution available right now is to copy your .css files into js at build time and then wrap them in the css function. Would be great to have something better here.

[Stradivario]

I have created simple webcomponent just for this purpose. Which is not the best option but it is the easiest if you want to just try something out faster without setup.

import { Component, html } from '@rxdi/lit-html';
/**
 * @customElement inject-tailwind
 */
@Component({
 selector: 'inject-tailwind',
 template: () => html`
  <link
   href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
   rel="stylesheet"
  />
 `,
})
export class TailWindComponent extends HTMLElement {}

[itsarnavsingh]

Here is an alternative, I have been working on https://github.com/itsarnavsingh/dress

[mizushino]

I found another solution. Just rewrite webpack config.

webpack.config.js

rules: [
//...
{
  test: /\.css$/,
  use: ['lit-css-loader', {
    loader: 'postcss-loader',
    options: {
      postcssOptions: {
        ident: 'postcss',
        plugins: [
          require('tailwindcss'),
          require('autoprefixer'),
          function (root, result) {
            return require('@fullhuman/postcss-purgecss')({
              content: [root.source.input.file.replace('.css', '.ts')],
              safelist: [':host'],
              defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
            })(root, result);
          }
        ],
      },
    }
  }]
}
//...
]

[CaptainCodeman]

I found the easiest solution was just to disable shadowDOM (createRenderRoot() { return this } - I have it in a base class for my app) and then use a global tailwind stylesheet which their normal build setup usually minifies to 4-5kb or so.

To prevent the custom elements creating a box (which can mess up some layouts) you may also need to set this.style.display = 'contents'.

Finally, because the TailwindUI components rely on transition features built into Alpine.js, Vue and React for their effects, I created a web-component equivalent which you can see at:

https://x-transition.web.app/
https://x-transition.web.app/stacked.html (demonstrates showing / hiding profile menu)

https://www.npmjs.com/package/@captaincodeman/transition

[GHNewbiee]

There is a new kind on the block who develops reboost, a dev server which supports LitElement and tailwind through Lit CSS Plugin. See how straight and easy it is right below:

my-element.js

import { LitElement, customElement, html } from 'lit-element';

import tailwind from './tailwind.lit.css';

@customElement('my-element')
export class MyElement extends LitElement {
  static get styles() {
    return [
      tailwind, /* or */
      css`${unsafeCSS(tailwind)}` /* (See note) */
    ];
  }

  render() {
    return html`
      <span class="text-sm text-blue-700">Lit Element</span>
    `
  }
}

Note: Whatever works for you!

Update: Also \/ is supported directly.

Latest version checked 1.9.6.