Tailwind css, how to set default font color?

user_3107926 0
Viewed 10052

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?

tailwind-css css javascript
5 Answers

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

user_31079260

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;

Let's check a Tailwind play example

user_3553160

Could you just add the attribute to the body tag?

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

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')},
      });
    })
  ],
}
user_58345320

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.

user_104949690
Related