CODEWITHSUNDEEP
laraveltailwind-css
Jakub
Jakub

Reputation: 1700

How to import tailwindcss/colors?

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.

enter image description here

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

enter image description here

I than realized the file is missing.

enter image description here

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

enter image description here

Any help much appreciated! :)

Upvotes: 5

Views: 16516

Answers (1)

codedge
codedge

Reputation: 5164

Inside your node_modules folder there 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.

Finally, run npm run dev and reload or delete your web browser's cookies to see the changes.

Upvotes: 17

Related Questions