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.
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
` 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 fileapp/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
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
Brent•
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.
Brent•
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,
* 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.
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.
Brent•
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.
Brian Carpenter•
I'm having many of the issues mentioned in this thread while trying to get tailwindUI to work. My JSP template has an app/javascript directory but does not have an app/javascript/stylesheets directory.
Rahul Gulati
Brent
did you both have to create this directory, or did it exist for you already?
The default JSP template (as of 10/20/2021) does not seem to have the app/javascript/stylesheets directory structure and the tailwind.config.js is located in the root. Did you have to move/relocate this?
I'm about 9 hours in trying to figure out how to override JSP default styles now and not sure what else to do at this point. Wondering if my issues are related to the recent JSP move to Rails CSS & JS bundling packages.
Any thoughts/help is appreciated.
app/assets/stylesheets/application.tailwind.css
@import "tailwindcss/base";
@import "tailwindcss/components";
/*
* Jumpstart Pro default styles
* Remove these if you'd like to use TailwindUI which expects a clean slate
*/
@import "tailwindcss/utilities";
@import "tippy.js/dist/tippy.css";
@import "flatpickr/dist/flatpickr.css";
root/tailwind.config.js
// See the Tailwind default theme values here:
// https://github.com/tailwindcss/tailwindcss/blob/master/stubs/defaultConfig.stub.js
const colors = require('tailwindcss/colors')
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
// https://tailwindcss.com/docs/just-in-time-mode
mode: 'jit',
plugins: [
require('@tailwindcss/aspect-ratio'),
require('@tailwindcss/forms')({ strategy: 'class' }),
require('@tailwindcss/line-clamp'),
require('@tailwindcss/typography'),
],
purge: [
'./app/helpers/**/*.rb',
'./app/javascript/**/*.js',
'./app/views/**/*.erb',
'./lib/jumpstart/app/views/**/*.erb',
'./lib/jumpstart/app/helpers/**/*.rb',
],
// All the default values will be compiled unless they are overridden below
theme: {
// Extend (add to) the default theme in the `extend` key
extend: {
// Create your own at: https://javisperez.github.io/tailwindcolorshades
colors: {
//orange: colors.orange,
transparent: 'transparent',
current: 'currentColor',
black: colors.black,
white: colors.white,
gray: colors.trueGray,
indigo: colors.indigo,
red: colors.rose,
yellow: colors.amber,
primary: colors.blue,
secondary: colors.emerald,
tertiary: colors.gray,
danger: colors.red,
"code-400": "#fefcf9",
"code-600": "#3c455b",
},
fontFamily: {
sans: ['Inter', ...defaultTheme.fontFamily.sans],
},
},
},
variants: {
borderWidth: ['responsive', 'last', 'hover', 'focus'],
},
// Opt-in to TailwindCSS future changes
future: {
},
}
TailwindUI expects a completely blank UI, so no styling at all. You can comment out the Jumpstart styles in that file if you want to start with a blank slate.
I personally just add TailwindUI components along with the Jumpstart styles and tweak them as necessary (like removing list item styles when necessary). Up to you.
Read up on the CSSBundling-Rails gem if you want to learn more about how it works. Jumpstart Pro doesn't do anything fancy at all, just uses the base configuration. 👍
Brian Carpenter•
Thanks, that stuff is a black box to me so will read up now that I know where to look.
You can comment out the Jumpstart styles in that file if you want to start with a blank slate.
You mean in app/assets/stylesheets/application.tailwind.css? If so, I thought I did. Should I have done/do something different?
Easy enough for me to tweak TaiwindUI templates where needed either way. Thanks.
Matthias Orgler•
Adding tailwindui doesn't seem as simple as uncommenting the JSP styles :(.
First the JSP styles define a few Bootstrap-like CSS classes that you then have to recreate using tailwind (like .btn).
Second the page structure of some tailwindui elements won't fit the site structure of JSP. This means further rework: creating new layouts and rewriting partials (including their variants).
Third the JSP css (unless you completely uncommented it) doesn't honor your tailwind theme. For example changing your primary color in the tailwind config will not change anything. Maybe JSP could at least use the colors defined in the theme (i.e. bg-primary-500 instead of bg-blue-500)?
After all, it would be too much to ask of JSP to make styling your app with tailwindui any easier. It will simply cost some effort to get your own look and JSP is just here as a starting point. But maybe a future version of JSP could offer tailwindcss as an option, so we don't have to change as many files to get started :).
Tabish Iqbal•
I don't know about y'all but its been pretty easy. Mind you TailwindUI still uses some old stuff where JSP is on tailwind3.
You can comment out the css in JSP and use them in the HTML or override them in the css file to what you want. As an example this is something I am working on using tailwind.
Screen Shot 2022-01-17 at 11.19.19 PM.png252 KB
Peter Grillet•
John Quarto-vonTivadar
I'd like to get in contact with TW expert too, if possible.
RUTALIA CLUB DE CONDUCTORES•
Hi there guys, any update on have TW working with JSP ? I followed all the previous posts and nothing seems to work for me. It's driving me mad... ;) My env is rails 7.0.3 and ruby 3.1.2
Chris Oliver
Brent
