We've moved discussions to Discord

Join Discord

solved: how/where to override the style of a tag *everywhere* OR to create a super-class comprised of other TW classes

JPW •
As a very simple example, I'd like to make all H1 tags a specific default color.

Since JSP apparently has no built-in concept of theming, and since the Tailwindcss "theming" in tailwind.config.js apparently has no concept of applying styles or classes to a tag like h1, I'm trying to figure out where I can place an overriding style and have it have absolute precedence in the CSS.

The Tailwind docs at https://tailwindcss.com/docs/adding-base-styles refer to a couple of approaches, (neither of which is well-defined): "add them in your CSS" and "writing a plugin".

Following their css example, I added a simple style for h1,h2,h3 to app/assets/javascript/base.scss
/**
 * This injects Tailwind's base styles, which is a combination of
 * Normalize.css and some additional base styles.
 */
@import 'tailwindcss/base';

/**
 * Here we add custom base styles, applied after the tailwind-base
 * classes
 *
 */
 
 @layer base {
  .prose h1, h1 {
    color: darkslateblue;
  }
  .prose h3, h2 {
    color: slateblue;
  }
  .prose h3, h3 {
    color: slateblue;
  }
}

It works, EXCEPT when the h1 tag has a parent of class "prose" (which is defined in tailwindcss/typography). 

I then tried adding the ".prose h1" shown above. But base.scss does not have absolute predecence...

So still, an h1 inside a div with class "prose" has the color set by tailwindcss/typography, not the override color in base.scss.

I can see that using Chrome dev tools to inspect the h1 tag... I can see my override has lower precedence than something injected later from tailwindcss/typography:

line 614: ** MY attempted override **
.prose h1, h1 {
    color: darkslateblue;
  }

line 1085: ** some TW magic auto-created style created by tailwindcss/typography takes precedence **
.prose h1{
  color: #111827;
  font-weight: 800;
  font-size: 2.25em;
  margin-top: 0;
  margin-bottom: 0.8888889em;
  line-height: 1.1111111;
}

Nowhere in the source code can I find any definition for "prose" except my override code above.

So I guess I have two questions... 

1) mainly out of curiosity, where in the source should I be able to see where/how tailwindcss/typography is defining ".prose" and ".prose h1"? (Sigh, I so dislike magic that obfuscates.)

2) MUCH more importantly, in JSP, where is the "source of truth" location to place a .scss file to globally, absolutely override the style for a tag regardless of what context that tag is used in (eg, even inside a div with the magic tailwindcss/typography "prose" class?)


John Quarto-vonTivadar •
all TW utility classes have the same specificity. have you successfully added utility class to *a* H1 yet, so you can convince yourself what to do? After that, go for the global override. I put all my specific CSS in a separate css file named the same as my app (and a few uses of the `apply` directive). The order you import it will determine what overrides what from the TW defaults

Not sure why you want JSP to have theming. JSP isn't here for that, it's here to ....wait for it .... *jumpstart* you with your project. So if you set your expectations to what it's here for and realize you are responsible for the rest, then you won't be as disappointed or frustrated.

( to be sure there is plenty of stuff about JSP that could use more documentation, but there are only 24 hours in a day. Many of these problems would disappear if we would all just win the lottery, damnit!)
John Quarto-vonTivadar •
I missed answering part of your question. As you may have guessed the typography css must be loading somewhere after your what you put in base.css.  So put all your custom stuff in a separate css and import it after typography. I don't recall where it loads but there's like 3 of them typography, utilities, forms(?) that all load together.  Put yours after that so you can be last-out of the gate.


John Quarto-vonTivadar •
maybe:
/app/javascript/stylesheets/tailwind.config.js  ?

yeah, yeah, I know ....a JS file getting involved in a CSS family dispute.
JPW •
Thank you. It may be that tailwind.config.js is the right place, problem (for me, a TW/Webpacker/Yarn novice) is that file looks like some sort of hash to store configuration, so I can't actually see that css added would be loaded, or if so, how to control the load order of an import or a css declaration after modules given how they specify modules (in a named array). I did try the other approach the sketchy TW docs hinted at in the link posted above, adding some plugin code in that file, but using their actual example got me no love, was unable to change h1 styling despite that being right in their example.

A quick workaround that works, although not with an @apply statement, but does work with plain old CSS is to add a little old-school tag styling at the end of app/assets/stylesheets/application.css thusly:

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_self
 */
.prose h1, h1 {
  color: darkslateblue;
}

As for JSP theming, well, sure, given the goal is "jumpstarting" IMO incorporating named theme elements, or at least a placeholder in the right place with a few tags, would be entirely consistent with a bunch of other cool stuff that is included in the nifty Jumpstart Configuration wizard. But it's not, no big deal, hopefully the "TW way" will surface how to extend TW theming to include setting TW classes for tags with absolute global precedence. Trivial in the olden days; probably still trivial today as soon as someone documents it.



John Quarto-vonTivadar •
this series is helpful too:
https://www.youtube.com/watch?v=qYgogv4R8zg
JPW •
Thank you, it's an excellent series, is actually what convinced me to try JSP even though on TW, so watched already. In their simpler setup example the "place" to overrides for tags is pretty clear. But once the "rails/webpacker/yarn magic gets stirred in it sort of obfuscates the structure and load order. 

I'll keep googling and will post here when I find the "TW way" to do it. (Unless someone beats me to it.)
John Quarto-vonTivadar •
oh webpacker is the evil player in this morality play for sure. I would say it is responsible for 80+% of my wasted time and about 99% of my frustration over the last 6 months.   Turbolinks, too, though for different reasons.   Unless you drink ALL of the Rails kool-aid, those two are evil evil evil.   At first I thought I was the problem but the more people I talk to the more and more whisper under their breath "this is madness". Alas there are few alternatives other than work-arounds
JPW •
Word. DHH is kidding himself if he thinks his month-long "May of WTFs" is anywhere near long enough to grok how badly they have trashed the Rails experience. (But, a good business opportunity for the folks behind JSP, bullettrain.co, and others - like bootrails.com if that ever launches - if any of them can "tame" the morass of broken dev experiences that is, unfortunately, Rails today.)
JPW •
OK, finally figured out how/where to create an app-specific stylesheet & overrides in JSP that is implemented "the Tailwind way" using the existing JSP structure for loading the TW stuff.

  1. add a .scss file inside  app/javascript/stylesheets such as project_custom.scss
  2. `@import` that filename to the bottom of app/javascript/packs/application.js (the bottom so it takes precedence)

example:

```
# STEP 1: new file app/javascript/stylesheets/project_custom.scss

/* you can add a new style using regular css or with @apply TW-CLASSes */
.simple-card{
  @apply border border-gray-400 rounded p-8 my-8;
}

/* you can establish a "theme"  for existing tags H1, etc again by using css or @apply TW-CLASS*/
.prose h1, h1 {
  @apply text-primary-700;
}
.prose h2, h2 {
  @apply text-primary-500;
}
.prose h3, h3 {
  @apply text-primary-500;
}
.prose blockquote, blockquote {
  @apply text-gray-600;
}
```

BTW you only need the .prose XX variations shown above if you use the TW typography "prose" class (which is  handy for presenting HTML over which you have no control such as fetched from a remote source, or for presenting long HTML passages that you don't want to tediously apply TW classes to each element and are happy with a sensible default for styling).

```
# STEP 2: EDIT app/javascript/packs/application.js

<bunch of existing stuff>
// Styles
// These are imported separately for faster Webpack recompilation
// https://rubyyagi.com/solve-slow-webpack-compilation/
import "stylesheets/base.scss"
import "stylesheets/components.scss"
import "stylesheets/utilities.scss"
import "stylesheets/project_custom.scss"     #### ADD YOUR SCSS HERE AT BOTTOM #####
```


My Discussions Participating All Discussions
Notifications
You’re not receiving notifications from this thread.