Proper way to define client typography in Tailwind css (for example : change h1 color // size // letter spacing)

user_3066142 0
Viewed 651

HTML

<div class="copy-block prose-xl prose-red prose">
                <h1>POTENTIAL MADE POSSIBLE</h1>
                <p class="f">For 30 years, companies have relied on Habitat Commons to empower them to achieve their full potential by providing strategic and creative solutions for growth. We are focused on creating results through partnership, expertise and innovation.For 30 years, companies have relied on Habitat Commons to empower them to achieve their full potential by providing
                strategic and creative solutions for growth. We are focused on creating results through partnership, expertise and
                innovation.</p>
            </div>

The color assigned to that h1 is text-gray-900 (I dont know why).

CSS

I am trying to find the best way to set up paragraphs headers etc. So this is my attempt (not working)

h1 {
    @apply text-cyan;
}

that does not show up in the dom anywhere.

My stack

  • angular 12
  • scss
  • nx workspace (nrwl)
  • tailwindcss: 2.1.2

I am new to TW and I am trying to do everything the "new" way but it is very tempting just to go back to old ways.

I have two questions that could clear this up.

I am new to TW and I am trying to do everything the "new" way but it is very tempting just to go back to old ways.

  1. What is the recommended way to define typography sizes // line-height // font-family etc?
  2. where is text-gray-900 defined as header text color? (do you recommend anything to read?)
tailwind-css
1 Answers

What is the recommended way to define typography sizes // line-height // font-family etc?

If you're using the Tailwind typography plugin, the documentation has a section on customizing styles. For example, you can change the h1 color to cyan-900 using the configuration below:

// tailwind.config.js
module.exports = {
  // ...
  theme: {
    extend: {
      // ...
      typography: (theme) => ({
        DEFAULT: {
          css: {
            h1: {
              color: theme('colors.cyan.900'),
            },
            // ...
          },
        },
      }),
    }
  },
  plugins: [
    require('@tailwindcss/typography'),
    // ...
  ],
}

You can customize the styles for every element and even add/change different size/theme modifiers.

As for font-families, that is also customized in your tailwind.config.js, but in a different location, since the typography plugin doesn't set font families. See the documentation for more information on customizing font families.

where is text-gray-900 defined as header text color?

The default styles are located in the typography Github repository. For the h1 color specifically, it is located on line 94 (as of commit 95bb9eb).

Tailwind has a lot of great defaults but is also flexible enough for you to customize, even if it can be a little confusing. The documentation is very thorough and complete, so I would suggest looking there for specific details on customizing different things.

user_91298320
Related