1.2.4 • Published 6 months ago
rollup-plugin-tailwindcss-lit v1.2.4
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 };
1.2.4
6 months ago
1.2.0
7 months ago
1.1.9
7 months ago
1.1.8
7 months ago
1.1.7
7 months ago
1.1.6
7 months ago
1.2.3
7 months ago
1.2.2
7 months ago
1.2.1
7 months ago
1.1.1
11 months ago
1.1.0
11 months ago
1.0.9
11 months ago
1.0.8
11 months ago
1.0.7
11 months ago
1.1.5
10 months ago
1.1.4
10 months ago
1.1.3
10 months ago
1.1.2
10 months ago
1.0.6
1 year ago
1.0.5
1 year ago
1.0.4
1 year ago
1.0.3
1 year ago
1.0.2
1 year ago
1.0.1
1 year ago
1.0.0
1 year ago