Documentation to Implement TailwindUI

Travis Smith
Jumpstart seems to have its own styles that interfere with using TailwindUI. Is there documentation someplace with steps to use TailwindUI? I've tried a few steps from the Tailwind site and other forum posts, but I still have conflicts somewhere.
John Quarto-vonTivadar
IIRC, there's a difference between the css used with the admin backend (via Administrate), which I dont think is Tailwind, versus what is in the rest of the app, which seems to be Tailwind or vanilla css. I have not had many challenges with the latter for that reason.  One thing that did present a challenge was the JS being used to power various effects, but since TW 2.0 and updates to TWUI there has become easier. I did have to write a bit of JS to get certain effects to work right, but that was because I didnt have enough of a contemporary JS skillset so I had to fall back to jquery. I did have some webpackr issues, ugh those were a headache. And because there's leftover Administrate CSS, and Tailwind CSS, and my css files are very heavy but I'm just living with it until all of JSP uses TW. I don't feel I really *need* to make the admin backend prettier as long as I'm getting what I want from the front end

what sort of conflicts are you getting? any specifics? 
Travis Smith
I dropped some sample TailwindUI components into a new view, and they were only partially styled. I've tried tweaking the @import setup in various files based on other tutorials I've come across, but it's still not right. CSS via Webpacker always confuses me, so I was hoping there was some setup documentation specific to TailwindUI I'd just missed.
John Quarto-vonTivadar
there isn't although I think this is something the TW experts are better at solving. I was frustrated for upwards of a month since it also involved JS from a few of the TW UI components, which used Stimulus. I eventually paid someone I found on the  TW forums to solve it (it took him like 15 min -- to solve the problem you have to have expertise in Rails, Webpacker, and TW, as well as having a comfort level with JSP, and that combined was just too much of a hurdle for me). And I completely agree that I cannot fathom Webpacker nor how we got to the point where we put css files into sub-directories named "js". Nevertheless here we are.  If you want, you can look at my code and hopefully it will help 

Annie O'Grady
John QvT - I am having the same 'styling' issues.   Any chance you can share the TW expert that solve your problems?
John Quarto-vonTivadar
let me ask him for permission first.

one thing that he did point out to me was: you know all those HTML comments you see in the TW components examples, such as:
`...
          <!--
            Off-canvas menu overlay, show/hide based on off-canvas menu state.

            Entering: "transition-opacity ease-linear duration-300"
              From: "opacity-0"
              To: "opacity-100"
            Leaving: "transition-opacity ease-linear duration-300"
              From: "opacity-100"
              To: "opacity-0"
          -->
...`

those are all just classes you can apply to the element in question to cause those effects. Now, in more modern frameworks a lot of this is built in behind the scenes but even if you used the ancient workhorse jQuery, you can achieve the above with:
`
    // when the hamburger is clicked
    $('#mobile-sidebar-el0').toggle()
    $('#mobile-sidebar-el1').toggle()
    $('#mobile-sidebar-el2').toggle()
    await new Promise(r => setTimeout(r, 100))
    $('#mobile-sidebar-el1').addClass('opacity-100').removeClass('opacity-0')
    // note we never remove the translate-x-0 class, we just add/remove the -translate-x-full class
    // otherwise the transition effect is jarring
    $('#mobile-sidebar-el2').removeClass('-translate-x-full')
`
and the DOM needs a tiny bit of time for the toggles and such to "take" hence the `setTimeout()`

That was just enough of a point in the right direction from him that I could implement everything I needed from the TW components based on what I knew of jQuery from a while back. I'm sure it's valuable and long-term smart to add additional skills like Stimulus to one's toolbox, but it's also valuable to be able to get something up and running in a few hours. 

So I hope that points you in the right direction
Jamie Crone
I was having some of these issue, I had to make webpacker recompile for these styles to work. 
If the styles you are adding has more colors like indigo you can add it to the tailwind config file app/javascript/stylesheets/tailwind.config.js   which will also cause webpacker to recompile, I have even added comments just to have it recompile, probably a better way but would do the trick

 theme: {
 |     // Extend (add to) the default theme in the `extend` key
 |     extend: {
 |       // Create your own at: https://javisperez.github.io/tailwindcolorshades
 |       colors: {
 |           teal: colors.teal,
            orange: colors.orange,
            indigo: colors.indigo,
 |         'primary': {
 |           50: '#F6F7FF',
 |           100: '#EDF0FE',
 |           200: '#D2D9FD',
 |           300: '#B6C1FB',
 |           400: '#8093F9',
 |           500: '#4965F6',
 |           600: '#425BDD',
 |           700: '#2C3D94',
 |           800: '#212D6F',
 |           900: '#161E4A',
 |         },
Brandon Brown
I"m also hitting styling issues, particularly with lists (<li>). @ Chris Oliver , will you be providing more instructions on how to properly setup Tailwind and TailwindUI? It is my understanding that they are supported and encouraged to be used. 
Beau Blinder
Brandon Brown I'm having the exact same issue and I have no idea how to fix it. Even styles which are declared in the app/javascript/stylesheets/tailwind.config.js like text-primary-500 don't work.  Chris Oliver  can we just get a primer on how this all works because it's clearly confusing to a bunch of people
I'm having the same issue integrating Tailwind UI into Jumpstart.  I was hoping for an easy way to just drop in Tailwind UI elements, but they're not working as expected.

An explanation of how to integrate Tailwind UI into Jumpstart, so we can just drop those components in would be very helpful.
Rahul Gulati
I hope some documentation is provided for this soon. Seems like a lot of people are running into problems trying to integrate pre-built Tailwind UI components.
Here is my solution so far (which seems to work for me).  My desired solution was to have "drop in" functionality for Tailwind UI. 

I'm working on a Mac, so your milage may very...

Step 1: I used yarn to install the latest version of tailwindui yarn add @tailwindcss/ui

Step 2: In app/javascript/stylesheets/tailwind.config.js, I updated my plugins array to look like this,

  plugins: [
		require('@tailwindcss/ui'),
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/forms'),
    require('@tailwindcss/line-clamp'),
    require('@tailwindcss/typography')
  ],
* Note, for some reason it was important that I added '@tailwindcss/ui' first.

Step 3: Lastly, in app/javascript/stylesheets/components.scss I commented out the component styles I didn't want from jumpstart rails, because they are the ones interfering with Tailwind UI.  

Here is an example of my components.scss file,

@import 'tailwindcss/components';

@import "components/base";
//@import "components/actiontext";
//@import "components/alert";
//@import "components/animation";
//@import "components/announcements";
@import "components/avatars";
//@import "components/buttons";
//@import "components/code";
//@import "components/connected_accounts";
//@import "components/direct_uploads";
//@import "components/docs";
//@import "components/forms";
//@import "components/icons";
//@import "components/iframe";
//@import "components/nav";
//@import "components/pagination";
//@import "components/tabs";
//@import "components/trix";
//@import "components/typography";
@import "components/util";

You'll see that I'm keeping the "avatars" component styles provided by Jumpstart, because I liked it better than Tailwind UI.

Final note, this will remove a lot of the default styles you see with Jumpstart.  So you'll have to make sure you're ok with switching primary to the Tailwind UI components throughout the app.
Just an update!

I'm finding if the changes from tailwindui aren't loading correctly, I can comment out one of those components, reload... then everything seems to work.

I then go uncomment the component.  

I suspect there is still an issue with Webpacker... we'll see when I push to production.

Rahul Gulati
Thanks Brent . I came up with a similar solution except I didn't need to place require('@tailwindcss/ui') before other require statements, and the components seem to be working fine for me.

I also did comment out the @import "components/base"; statement in app/javascript/stylesheets/components.scss, as it was interfering with the look and feel of the TailwindUI elements, but I'm guessing you already know about it.

I think you're also new to JSP like me. It would be great to connect with you on LinkedIn.

Brandon Brown
Thanks for sharing this. It does seem to help the problem. It's just a bit frustrating to play games to get tailwind to work. Really wish all styling was just tailwind so no clashes. 
Notifications
You’re not receiving notifications from this thread.
Subscribe
© 2021 GoRails, LLC