Tailwind and Rails 7 import-maps?

[lafeber]

How do we make tailwindcss work without webpacker?

[dhh]

This gem does that?

[lafeber]

Sorry I meant tailwind with customisations. It says in the README that it's not possible without webpacker though, my bad.

[dhh]

I don't think I understand? If you want to use Tailwind with Webpacker, you can use the normal Tailwind installation instructions, since you'll be compiling everything yourself.

This gem sidesteps all of that for a simpler, unconfigured version of tailwind.

[ghiculescu]

@dhh I think the question is, is there a way to customise tailwind without using webpacker?

The super exciting about importmaps is being able to throw webpacker & node.js in the bin, but at the moment that doesn't seem practical if you want to use any Tailwind customisations (eg. @apply, or a custom colour scheme).

[ghiculescu]

https://tailwindcss.com/docs/installation#using-tailwind-via-cdn isn't giving me much hope

[dhh]

No TW customization without the whole node rigamarole at the moment, no. I think @apply is better done via Rails helpers, though. That's how we're using this gem at Basecamp. But if you need custom color scheme etc, you will have to compile it yourself for now.

[Merovex]

Being able to customize without the whole node rigamarole would be a winning feature. Otherwise, adopting Tailwind struggles against adopting Import Maps. Or, am I missing something?

https://codepen.io/beyondcode/pen/XWMjKLm

[dhh]

Not in the cards, I'm afraid. But someone could build a web service that could do it! Like a specializing CDN. Have at it 😄

[Merovex]

I got it to work using this (granted not for prod):

https://github.com/tailwindlabs/tailwindcss/releases/tag/v3.0.0-alpha.1

<%# stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %>
<script src="https://cdn-tailwindcss.vercel.app/"></script>
    <script>
      tailwind.config = {
        theme: {
          extend: {
            colors: {
              red: {
                50: '#e0c1b6',
                100: "#e5dad7",
                200: "#cbb5ae",
                300: "#b09186",
                400: "#966c5d",
                500: "#7c4735",
                600: "#63392a",
                700: "#4a2b20",
                800: "#321c15",
                900: "#190e0b"
              }
            }
          },
        },
      }
    </script>