How to get Tailwind CSS to config file to connect to my HTML?

I'm trying to use custom colors in the my html file but by tailwind.config.js does not seem to be connecting. I have the content configured to './*.html' so it'll look for everything in the root. My HTML file is in my root so anyone know what is wrong?

```
module.exports = {
  content: ['./*.html'],
  theme: {
    screens: {
      sm: "480px",
      md: "768px",
      lg: "976px",
      xl: "1440px"
    },
    extend: {
      brightRed: "hsl(12, 88%, 59%)",
      brightRedLight: "hsl(12, 88%, 69%)",
      brightRedSupLight: "hsl(12, 88%, 95%)",
      darkBlue: "hsl(228, 39%, 23%)",
      darkGrayishBlue: "hsl(227, 12%, 61%)",
      veryDarkBlue: "hsl(233, 12%, 13%)",
      veryPaleRed: "hsl(13, 100%, 96%)",
      veryLightGray: "hsl(0, 0%, 98%)",
    },
  },
  plugins: [],
}
```

Solution

You'll need to add it into a colors section. Changing it to this should fix your problem.

module.exports = {
  content: ['./*.html'],
  theme: {
    screens: {
      sm: "480px",
      md: "768px",
      lg: "976px",
      xl: "1440px"
    },
    colors: {
      brightRed: "hsl(12, 88%, 59%)",
      brightRedLight: "hsl(12, 88%, 69%)",
      brightRedSupLight: "hsl(12, 88%, 95%)",
      darkBlue: "hsl(228, 39%, 23%)",
      darkGrayishBlue: "hsl(227, 12%, 61%)",
      veryDarkBlue: "hsl(233, 12%, 13%)",
      veryPaleRed: "hsl(13, 100%, 96%)",
      veryLightGray: "hsl(0, 0%, 98%)",
    },
  },
  plugins: [],
}

From there you can specify different versions. Like 100, 200, 300 by adding something like this.

      'tahiti': {
        100: '#cffafe',
        200: '#a5f3fc',
        300: '#67e8f9',
        400: '#22d3ee',
        500: '#06b6d4',
        600: '#0891b2',
        700: '#0e7490',
        800: '#155e75',
        900: '#164e63',
      },

This is all off of the tailwind documentation here Hope this helps