I just want to point out that you can use Tailwind inside your CSS with the `@apply` directive (not to be confused with the since abandoned CSS `@apply` rule). You write your CSS and mix in Tailwind instructions where it makes sense. Example:

    @import 'tailwindcss';
    
    p {
     @apply text-justify;
     @apply bg-slate-300 dark:bg-slate-800;  /* Second rule just for colors */
     display: block;  /* regular CSS */
    }
I used to be a big Tailwind hater because putting all those utility classes as inline styling into my HTML is a crime against nature. But this way I get the best of both worlds. Tailwind is really nice as higher-level building blocks and saves me from writing a bunch of media queries.

> putting all those utility classes as inline styling into my HTML is a crime against nature.

It’s really not when working with components instead of pages, and when working with variables properly

Even with components I prefer what Astro is doing: the component can have a `<style>` tag in which I can add my own CSS. When building the website Astro will know how to transform the CSS so it only applies to that component. This way markup and presentation remain separate even if they are within the same source file.

https://docs.astro.build/en/guides/styling/