Use tailwindcss in your tsdown component libraries.
The @tailwindcss/vite plugin unfortunately doesn't work with tsdown, so I created this plugin which is a modified version of that plugin but with tsdown support.
This plugin extracts classes from your source files and enables use of libraries like daisyui, just like the vite plugin.
I intend for this plugin to be used with @bosh-code/tsdown-plugin-inject-css, as you need someway of importing the built CSS in the bundle. You can achieve the same result in other ways if you would prefer not to use the plugin, but I find the plugin to be nicer.
Install the plugin:
# npm npm install -D @bosh-code/tsdown-plugin-inject-css @bosh-code/tsdown-plugin-tailwindcss # yarn yarn add -D @bosh-code/tsdown-plugin-inject-css @bosh-code/tsdown-plugin-tailwindcss # pnpm pnpm add -D @bosh-code/tsdown-plugin-inject-css @bosh-code/tsdown-plugin-tailwindcss
Add the plugins to your tsdown.config.ts:
// tsdown.config.ts import { injectCssPlugin } from '@bosh-code/tsdown-plugin-inject-css'; import { tailwindPlugin } from '@bosh-code/tsdown-plugin-tailwindcss'; export default defineConfig({ external: ['preact'], plugins: [ tailwindPlugin(), injectCssPlugin() ] });
And add the tailwind import to your library entrypoint CSS file, usually src/index.css:
/* src/index.css */ @import "tailwindcss"; /* Add any other global styles here */
This plugin is a modified version of the @tailwindcss/vite plugin that I created to work with my preact component library.
Contributions welcome!
MIT © bosh-code
