Registry /
devops / rollup-plugin-tailwindcss-lit
Install & Compatibility
Where this runs
No compatibility data collected yet for this library.
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
default
✓ import tailwindcss from 'rollup-plugin-tailwindcss-lit';
✗ const tailwindcss = require('rollup-plugin-tailwindcss-lit');
Plugin is ESM-only; CommonJS require will fail.
default
✓ import styles from 'index.css';
✗ import 'index.css';
You must import the CSS file as a default import to get the CSSResultLike object for Lit static styles.
css
✓ import { css } from 'lit';
Standard Lit import for template literal CSS. Still needed for inline styles alongside the imported styles.
Shows how to configure Rollup with the plugin, alias a CSS file, and use the imported styles in a Lit element.
// rollup.config.js
import tailwindcss from 'rollup-plugin-tailwindcss-lit';
import { fileURLToPath } from 'node:url';
import { dirname, resolve } from 'node:path';
import alias from '@rollup/plugin-alias';
const __filename = fileURLToPath(import.meta.url);
const cssPath = resolve(dirname(__filename), 'src/index.css');
export default {
input: 'src/index.js',
output: { dir: 'dist', format: 'es' },
plugins: [
alias({ entries: [{ find: 'index.css', replacement: cssPath }] }),
tailwindcss()
]
};
// src/index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
// src/my-element.js
import styles from 'index.css';
class MyElement extends LitElement {
static styles = [styles];
render() {
return html`<p class="text-blue-500">Hello</p>`;
}
}
Errors
Common errors & fixes
Error: Cannot find module 'index.css'
The import path is not resolved; the plugin needs an alias to map the bare import to an absolute path.
fixUse @rollup/plugin-alias to alias 'index.css' to the absolute path of your CSS file.
TypeError: styles is not a function
The imported CSS was not transformed into a CSSResultLike object; often due to missing PostCSS or Tailwind configuration.
fixEnsure postcss.config.js exists and includes tailwindcss plugin.
Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type.
Rollup is trying to parse the CSS output as JavaScript; the plugin isn't transforming the CSS correctly.
fixCheck that the plugin is added to the plugins array and that the CSS file is imported as a default import.
Audit
Dependencies
tailwindcssrequiredPeer dependency; the plugin generates CSS using Tailwind's PostCSS plugin.
postcssrequiredRequired for processing Tailwind directives and PostCSS config.
litrequiredPeer dependency; the output CSS is used with LitElement static styles.