CODEWITHSUNDEEP
tailwind-css
Nathan Nosar
Nathan Nosar

Reputation: 1

Extending colors in Tailwind

Please help. I am trying to use custom colors in Tailwind and have already installed... configured and gotten Tailwind to work in my project. I then added the custom colors into Tailwind and ran 'npm run build:css' from my package.json file and it runs successfully but I cannot get the colors to work. I have tried putting quotes around the colors and not the values and it still doesn't work. Here is my code.

    module.exports = {
      theme: {
        extend: {
          colors: {
            limegreen: {
              '50':  '#FBFCF7',
              '100': '#F8FBE1',
              '200': '#EEF69E',
              '300': '#DCEC53',
              '400': '#A8D619',
              '500': '#65DC21',
              '600': '#429E04',
              '700': '#357C06',
              '800': '#295B09',
              '900': '#20450A',
             },
          }
        }
      }
    }

Upvotes: 0

Views: 780

Answers (2)

Dom V
Dom V

Reputation: 71

Your syntax seems to be correct, you can also write it like this:

colors: {
        secondary: "#FF0000",
        silver: "#F3F3F3",
        gray: {
          dark: "#1f2d3d",
          darkest: "#3c4858",
          DEFAULT: "#777",
          light: "#e0e6ed",
          lightest: "#f9fafc",
          naive: "#333333",
          naiveHover: "#7F7F7F",
        },
      },

Make sure that the className is correct:

<div className="bg-limegreen-50"></div>

orr

<div className="text-limegreen-50"></div>

Upvotes: 0

Winter
Winter

Reputation: 326

Your approach is correct. I tried the same in my code and it worked fine. I would suggest using 'npm start' and refreshing the page after saving this code. The tailwind configuration file takes a little more time to show changes. Besides, I would suggest writing the numbers without quotes.

Upvotes: 1

Related Questions