CODEWITHSUNDEEP
javascriptcsstailwind-css
Oscar Franco
Oscar Franco

Reputation: 6230

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?

Upvotes: 42

Views: 40005

Answers (6)

Russo
Russo

Reputation: 2982

If you use Shadcn UI, in layout.tsx, add dark in your className:

E.g. <html lang="en" className="dark">

Upvotes: -2

MARK
MARK

Reputation: 13

First define foreground variable in index.css:

@layer base {
  :root {
    --foreground: 202 60% 24%;
  }
}

Then add foreground color to tailwind colors in tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      colors: {
        foreground: "hsl(var(--foreground))",
      }
    }
  }
}

Upvotes: 0

OzzyCzech
OzzyCzech

Reputation: 10342

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

Upvotes: 30

tgtb
tgtb

Reputation: 191

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

Upvotes: 7

alexmcfarlane
alexmcfarlane

Reputation: 1148

Could you just add the attribute to the body tag?

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

Upvotes: 3

Oscar Franco
Oscar Franco

Reputation: 6230

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

Upvotes: 32

Related Questions