I'm trying to build out a single static component in Astro.build that has previously been built in Svelte, but I'm not sure I have my environment properly setup. I have an imported TS file that returns an object with my tailwind classes. Essentially I get back an object that looks like this:
tailwind = {
wrapper: 'container mx-auto',
headline: 'text-4xl sm:text-6xl lg:text-7xl'
}
There is no weirdness in that function like 'text' + var + 'xl' it's just simply concatenating classes.
Then in my astro component I deconstruct the props { wrapper, headline } = tailwind(); so that I can assign them to elements like <div class={wrapper}>
This all works fine and my source HTML has all the classes I want. However my CSS file does not include the classes unless I first add them to the astro component directly.
for example if I first add and then change it to <div class={wrapper}> it all works fine, but if I were to add bg-blue-500 to what wrapper returns I do not get a blue background.
I should note this process works great in Svelte so I think it's something with my vite settings, but honestly I get a little lost when it comes to the roll up process. Can someone please help point me in the right direction?
Since Tailwind dynamically generates the CSS output, it needs to know the location of all files with Tailwind Classes.
From https://tailwindcss.com/docs/content-configuration
The
contentsection of yourtailwind.config.jsfile is where you configure the paths to all of your HTML templates, JavaScript components, and any other source files that contain Tailwind class names.
Add the .ts file to the content section of your Tailwind config file.