'Tailwind css, how to set default font color?

I'm using tailwind css in my project, due to our application styles we are using a default font color, however I cannot seem to find how to do this in tailwind, the documentation page only talks about extending the color palette, but not how to set a default color.

Any ideas on how to achieve this?

javascriptcsstailwind-css


Solution 1:[1]

I ended up solving this in the dumbest way possible, on a global css file:

html {
  @apply text-gray-800
}

Not pretty but at least I can use the tailwind classes

Solution 2:[2]

Could you just add the attribute to the body tag?

<body class="text-gray-800"></body>

Solution 3:[3]

There is few options, you can add class to the <body> or <html> tag:

<!doctype html>
<html lang="en">
  <body class="text-green-500">
  </body>
</html>

or you can just extend base layer in your index.css file:

@tailwind base;

@layer base {
  html {
    @apply text-green-500;
  } 
}

@tailwind components;
@tailwind utilities;

Here is play https://play.tailwindcss.com/54UrOn1txd example

Solution 4:[4]

I ended up here while trying to do this in my tailwind.config.js file.

Here's how for anyone who needs it:

const plugin = require('tailwindcss/plugin');

module.exports = {
  // ...
  plugins: [
    plugin(({addBase, theme}) => {
      addBase({
        // or whichever color you'd like
        'html': {color: theme('colors.slate.800')},
      });
    })
  ],
}

Solution 5:[5]

Just import a normal stylesheet in your entry file and do it there. e.g.

p, h1, h2, h3, h4, h5, h6 {
  color: green;
}

If you're using a client side framework like React, You could also create Typography components. Usually I start by creating a Text component which has my preferred font-size, font-weight, color, and line height. I then create more components from that component such as Paragraph, Header, Display...etc Each with its own size, weight and line-height. This way, I can take advantage of the JS (Say I wanna add new props to the Text component), and it's easier to refactor stuff in the future since all my Typography components are based on one Text component.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Oscar Franco
Solution 2 alexmcfarlane
Solution 3 OzzyCzech
Solution 4 tgtb
Solution 5 T. Dayya

Related Questions