How to import tailwindcss/colors?

Question

I am trying to make the extended pallet work as outline in here https://tailwindcss.com/docs/customizing-colors#color-palette-reference

I have installed tailwind, but only have the default colors.

When I try and add the code with the ; or without it doesn't work.

I than realized the file is missing.

How do you get this file? I know I have tailwind working because the regular color scheme works and all the other functionalities. I just can't seem to get the custom colors to work ,and I really don't want to manually add all of them if I can prevent it lol

I am referring to these extended ones

Any help much appreciated! :)

codedge codedge · Accepted Answer · 2021-02-02T09:33:53

Inside your node_modules folder there is are two Tailwindcss folders

@tailwindcss
tailwindcss

These two folders refer to the packages inside your package.json

{
  // .. other stuff

  "devDependencies": {
        "@tailwindcss/forms": "^0.2.1",
        "@tailwindcss/typography": "^0.3.0",
        // ... other packages
        "tailwindcss": "^2.0.1"
    }
}

Inside the tailwindcss folder you can spot a colors.js file which is the one imported in your tailwind.config.js

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

module.exports = {
  theme: {
    extend: {
      colors: {
        // Colors you want to add go here
        rose: colors.rose,
        cyan: colors.cyan
      }
    }
  }
}

Here I extend the colors already included by using the extend node within theme.

How to import tailwindcss/colors?

1 Answers