CODEWITHSUNDEEP
javascripttailwind-css
Jason Todd
Jason Todd

Reputation: 191

customizing color tailwind

I've been reading the documentation for tailwindcss but I just cannot configure my 'tailwind.config.js' file to property export a custom color property to my HTML. Is there something I am doing wrong? I installed the tailwind css 2.0 dependency along with postcss/ autoprefixer. The below are my 3 main files. I am trying to get the custom color name "slightly" to work but just doesn't color up my body background. Wondering if i am exporting my module incorrectly in my JS file?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="../node_modules/tailwindcss/dist/tailwind.css" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
    <title>Document</title>
</head>
<body class="bg-slightly-600">
    
    
</body>
</html>


JS:

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      slightly: '#c44e4e'
    },
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

CSS:
@tailwind base;
@tailwind components;
@tailwind utilities;

Upvotes: 0

Views: 2609

Answers (2)

thekyle
thekyle

Reputation: 41

The route cause here may be that you are trying to reference a shade of your custom color that does not exist (ie: slightly-600).

<!DOCTYPE html>
<html lang="en">
<head>
...
</head>
<body class="bg-slightly-600"> # here you are trying to insert the   color `slightly` with shade `600`
    
    
</body>
</html>


JS:

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      slightly: '#c44e4e' # but down here, you aren't defining the  shade `600` for slightly
    },
...

So you can do one of two things:

  1. Define the shade 600 for slightly in your tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      slightly: {
        DEFAULT: '#c44e4e',
        600: # whatever your custom shade is here!
    },
...

or 2. Keep the config the same, but change the reference in your HTML such that you are referencing your base color, and not the shade 600

...
<body class="bg-slightly"> # no reference to 600
...

You could verify that this color shade does/does not exist by searching the main.css file that is generated by tailwinds and searching for keyword slightly-600. If you didn't define the shade of a custom color explicitly, it will not be generated.

Upvotes: 0

Ihar Aliakseyenka
Ihar Aliakseyenka

Reputation: 14323

You should include not tailwind.css from node_modules but compiled files.

Let say you have this basic app structure

.
├── resources
│   └── input.css
└── index.html

input.css - file where you include Tailwind presets

@tailwind base;
@tailwind components;
@tailwind utilities;

tailwind.config.js - no need to include anywhere. Config file may differ from Tailwind versions (bellow is for v.2.2+ with jit mode)

module.exports = {
  mode: 'jit',
  purge: {
     content: [
      './**/*.html' // watch all html files
     ],
  },
  darkMode: false, // or 'media' or 'class'
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      slightly: '#c44e4e'
    },
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Then run next command

npx tailwindcss -i ./resources/input.css -o ./public/output.css

This command will generate public/output.css file which will contain all compiled classes according to your configuration - it should contain bg-slightly class

in index.html link compiled file from public folder.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./public/output.css">
    <title>Document</title>
</head>
<body class="bg-slightly">
    
</body>
</html>

You can use the --watch or -w flag to start a watch process and automatically rebuild your CSS any time you make any changes:

npx tailwindcss -i ./resources/input.css -o ./public/output.css --watch

More about Tailwind CLI here

Upvotes: 1

Related Questions