How to ship tailwind powered Ember addon using v2 format

Questions
1

Hi folks,

We are trying to create an internal ember components library using v2 addon format. Right now I have a hard time wrap my head around how to make it work if the components were styled using tailwind css.

My thinking is I would need to build the css explicitly for all (or for each component) so the consuming side won’t even know there is tailwind invovled. Another approach would be to ask the consuming ember app to include a separate styling package (tailwind plugin). Then it would be bundled on the app side (not sure if this is even possible on top of poor dev ergonomics )

References:

Thanks a lot if anyone can share any insights?

2

Not super related, but I think maybe the way to go is to separate style and component/addon as two different packages for consumer app to use. Similar to what Skeleton UI’s strategy:


import { join } from 'path';
import type { Config } from 'tailwindcss';

// 1. Import the Skeleton plugin
import { skeleton } from '@skeletonlabs/tw-plugin';

const config = {
	// 2. Opt for dark mode to be handled via the class method
	darkMode: 'class',
	content: [
		'./src/**/*.{html,js,svelte,ts}',
		// 3. Append the path to the Skeleton package
		join(require.resolve(
			'@skeletonlabs/skeleton'),
			'../**/*.{html,js,svelte,ts}'
		)
	],
	theme: {
		extend: {},
	},
	plugins: [
		// 4. Append the Skeleton plugin (after other plugins)
		skeleton
	]
} satisfies Config;

export default config;

Where the magic really happens on the consumer app end. By:

  1. including a tailwind plugin
  2. ensure the source of the addon in the content array.
3

Can confirm the above approach works great for this scenario.

3 Likes