rollup-plugin-tailwindcss-lit

Rollup plugin to use Tailwind CSS in Lit.

Install

npm i rollup-plugin-tailwindcss-lit

Usage

rollup.config.js

import tailwindcss from 'rollup-plugin-tailwindcss-lit';

export default {
    ...
    plugins: [tailwindcss()],
};

import styles from 'index.css';

@customElement('my-element')
class One extends LitElement {
    static styles = [styles];

    render() {
        return html`<p class="text-blue-500">Hello</p>`;
    }
}

Suggest using @rollup/plugin-alias to shorten import paths.

import { fileURLToPath } from 'node:url';
import { dirname, resolve } from 'node:path';

const __filename = fileURLToPath(import.meta.url);
const cssPath = resolve(dirname(__filename), 'src/index.css'); // Absolute path

plugins: [alias({ entries: [{ find: 'index.css', replacement: cssPath }] }), ...];

Compile inline CSS

static styles = [
    styles,
    css`
        :host {
            @apply text-blue-600;
            width: 100px;
        }
    `,
];

After compilation

static styles = [
    styles,
    css`
        :host {
            width: 100px;
        }
        :host {
            --tw-text-opacity: 1;
            color: rgb(37 99 235 / var(--tw-text-opacity));
        }
    `,
];

The @apply directive supports multiple features, for example: @apply hover:bg-blue-700.

Tailwind CSS IntelliSense supports CSS tags.

"tailwindCSS.experimental.classRegex": [["css\\s*`([^`]*)`", "@apply\\s+([^;\\n]+?)(?:;|\\n)"]],

Inline CSS should always include a selector.

Wrong Way

const other = css`@apply text-blue-50`;

static styles = [
    styles,
    css`
        :host {
            color: ${other};
        }
    `,
];

Right Way

const other = css`:host { @apply text-blue-50 }`;

static styles = [
    styles,
    css`
        p {
            color: red;
        }
        ${other}
    `,
];

postcss.config.js

import tailwindcss from 'tailwindcss';

export default {
    plugins: [tailwindcss],
};

Dev and Prod

Use different plugins for different environments. It's recommended to use the Rollup environment command, --environment NODE_ENV:dev. environment-values

import tailwindcss from 'tailwindcss';
import cssnano from 'cssnano'; // Minify CSS
import remToPx from '@thedutchcoder/postcss-rem-to-px'; // Convert rem units to px

const plugins =
    process.env['NODE_ENV'] === 'build'
        ? [tailwindcss(), remToPx(), cssnano({ preset: ['default', { discardComments: { removeAll: true } }] })]
        : [tailwindcss(), remToPx()];

export default { plugins };