Tailwind Support

[eikaramba]

Hey there, first of all i am constantly checking this project out every few weeks and basically just wait before doing a project with it. i just tested it again and had a question in regards to tailwind support. i saw it was included but (i think) removed again. does it support it? i certainly understand that tailwind is not for everyone but even i as a super CSS nerd can see the benefits especially with a tool like primo, where i quickly want to hack together some components.

[mateomorris]

That's right, Tailwind was pretty integral to Primo during its earliest version, but I made the tough decision to remove it last year for several reasons. I used to be a huge Tailwind fan, but as I started to use it more and more I realized that a lot of the problems it solved weren't problems anymore in Primo: style leaking (thanks to CSS scoping), naming classes (again thanks to scoping), and building quickly (thanks to prebuilt components). I think that's also why Svelte & Tailwind don't play so well together, since most of those advantages really come from Svelte.

There would still be a productivity advantage if you're starting from scratch, but the long-term goal of Primo is that you would rarely if ever have to start from scratch since you'd have access to Primo's built-in components & components built by other users. And in that scenario, Tailwind presents a clear disadvantage since its weak point is editing pre-built components; IMO, that's why people who use TailwindUI tend to just use it out of the box without changing a lot of classes (and why you can always tell when something is built with TailwindUI). Not only is it visually harder to scan through and modify Tailwind classes compared to scanning a vertical list of property-value pairs, but adding all those classes to the HTML also makes it harder to understand the other things going on in the HTML, like templating logic and event handlers.

Besides that, since Tailwind's a pretty robust tool, I found myself spending a lot of time getting it working in Primo that was better spent on the other features in the roadmap. There are other reasons I won't get into, but that's primarily why I don't see it re-entering the feature list any time soon.

With that said, if you really want to build components in Primo with Tailwind, you can do so using Twind (I also tested with https://cdn.tailwindcss.com but it doesn't seem to work as well) by adding the Twind Shim script (import 'https://cdn.skypack.dev/twind/shim') to your component's JS:

But I'd recommend just using it for prototyping or non-production sites, since it relies on JS & takes a second to render the styles.

[eikaramba]

thank you for that elaborate answer. absolut makes sense and although i am using tailwindcss nowadays quite often, your comments reminded me again why i maybe should switch again from time to time.

[SrGeneroso]

I loved tailwind first time I used it, but as @mateomorris said, most benefits are already covered by svelte, so I went back and forget about setting it up and managing it (kind of like TypeScript, I'm loving JSdocs).
To don't loose the work done I used https://tailwind-to-css.vercel.app/ to convert my tw components back to css and it worked great, there are also css to tailwind converters so no work goes wasted.
I like how primo also separates html, js and css in different panels, kind of ironic as svelte is great because combine those, but knowing they are together but I can visually separate them is great. I know it makes no sense, but it does for me.

[mateomorris]

Okay with a recent update that appended script tags in Page/Site HTML to the page, the best way to use Tailwind is now to use Tailwind's official Play CDN:

1. Add CDN script to Page/Site HTML (and optionally the config)

<script src="https://cdn.tailwindcss.com"></script>
<script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            clifford: '#da373d',
          }
        }
      }
    }
</script>

3. Write Tailwind styles in Primo Blocks

  <h1 class="text-3xl font-bold underline text-clifford">
    Hello world!
  </h1>

The only downside to this approach is that it works with JS, so the style's won't render for users who have JS disabled. Also there will be a [mostly imperceptible] flash of unstyled content when the page first loads. But it should work well enough for Tailwinders.