svelte-add

svelte-add copied to clipboard

Hi all, I am using sveltekit with tailwind to create a package npm run package . The components are styled with tailwind and I can see the final result in dev mode by using the $lib/Components in routes/index.svelte.

When I need to publish it , first I have to run npm run package to compile my component library to package folder. The styles are compiled BUT the normalize css is not added (@ tailwind base), this means that the published files are different to my dev mode result (inconsistency).

What is the best approach to add the normalize css for components library?

For background, this is the component : https://github.com/mdof/matrix-algebra-svelte/blob/main/src/lib/Input.svelte

Style issue: When focus on any input, there should be a ring indigo but there is nothing.

I'm having the exact same kind of problem, when publishing my package on npm I'm loosing all the style relative to tailwindcss ! I still don't know if it's a configuration problem on my side, but since I found this issue, I took the liberty to share. If you want more context/see the eventual config issue : https://github.com/V-Py/kanban-svelte

I'm having the exact same kind of problem, when publishing my package on npm I'm loosing all the style relative to tailwindcss ! I still don't know if it's a configuration problem on my side, but since I found this issue, I took the liberty to share. If you want more context/see the eventual config issue : https://github.com/V-Py/kanban-svelte

I had the same issue of loosing ALL the tailwind styles, but got a workaround if you want to try (maybe does not fit , because you use type="text/scss" ): instead of setting the styles in the tag, put them in

<div class="kanban-container">...

<style lang="postcss"> .kanban-container{ @apply flex-1 w-full flex justify-start [also your background color]; } </style>

After running npm run package , your components will have the styles but then you will have my issue where the normalize css (used in preflight with @ apply base) is not exported with your component.

Thank you very much for the tip will try this and keep track of your issue in the same time 👍

Just want to chime in as yet another person who would like to use Tailwind to develop a shared component library. I'm not willing to use the @apply workaround because of its drawbacks: increased CSS size and complexity of using @apply (Adam Wathan has said that if they could do it over again they never would have created @apply...)

https://twitter.com/adamwathan/status/1559250403547652097

I can say with absolute certainty that if I started Tailwind CSS over from scratch, there would be no @​apply 😬

The behavior is outrageously complicated, everyone struggles to build the right mental model of what it's supposed to do, and it encourages bad CSS architecture.

For now my plan is to use Tailwind anyway, and then do the extra work to copy the resulting styles into a <style> tag in each component. It'll be a maintenance nightmare, but TW is worth it. 🥺

One of the very helpful people on the Tailwind Discord server (Thanks, @crswll!) helped me find a good(ish) solution to this problem.

If you're building a set of components for other projects to consume, let's say you have your design system, and your consumer project.

In your consumer project, it must use tailwind as you normally would, and then update the content setting in your tailwind.config.cjs like so:

from: content: [ './src/**/*.{html,js,svelte,ts}' ] to:

content: [
	'./src/**/*.{html,js,svelte,ts}',
	'./node_modules/DESIGN_SYSTEM/**/*.{html,js,svelte,ts}'
]

This also works if your design system is in an org, with and without using npm link to attach it for local development purposes:

content: [
	'./src/**/*.{html,js,svelte,ts}',
	'./node_modules/@COMPANY/DESIGN_SYSTEM/**/*.{html,js,svelte,ts}'
]

This might not be an ideal solution for something like a public-facing project, given the requirement that the consuming project install Tailwind and modify the config, but it's certainly good enough for an internal project for your company.

Also documented here: https://adamtuttle.codes/blog/2023/tailwind-svelte-design-system/