A plugin for integrating Tailwind CSS with Semantic UI components.
npm install @semantic-ui/tailwindA plugin for integrating Tailwind CSS with Semantic UI components. Automatically scans component definitions for Tailwind classes and generates the corresponding CSS for shadow DOM encapsulation.
* Automatic Class Detection: Scans templates, JavaScript functions, and CSS for Tailwind class usage
* Shadow DOM Optimized: Generates scoped CSS that works within web component shadow boundaries
* Isomorphic: Works in both Node.js and browser environments
* @theme and @utility Support: Full support for Tailwind's theme customization and custom utilities
``javascript
import { defineComponent, getText } from '@semantic-ui/component';
import { TailwindPlugin } from '@semantic-ui/tailwind';
const template = await getText('./button.html');
const css = await getText('./button.css');
let definition = {
tagName: 'my-button',
template,
css,
defaultSettings: {
variant: 'primary'
}
};
// Transform definition to include generated Tailwind CSS
definition = await TailwindPlugin(definition);
export const MyButton = defineComponent(definition);
`
html
`$3
css
@theme {
--color-blue-500: #3b82f6;
--color-blue-600: #2563eb;
}/ Custom utilities /
@utility transition-colors {
transition-property: color, background-color, border-color;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
``The plugin will scan all content and generate the appropriate Tailwind CSS, replacing the component's CSS with the compiled output.