Skip to content

Theme function is not working properly. #2666

Answered by simonswiss
fcno asked this question in Help

You must be logged in to vote

Hey @Babiute!

Here's what's happening: you have defined your colors immediately in the theme, under the theme.colors key. When you do that, you essentially completely replace the theme colors by overriding the default theme.

If you want to extend the theme colors, you need to define your new colors inside the extend property - theme.extend.colors, like you did for extending the font family

// tailwind.config.js

module.exports = {
  future: {
    // removeDeprecatedGapUtilities: true,
    // purgeLayersByDefault: true,
  },
  purge: [],
  theme: {
+ extend: {
      colors: {
        pattern: {
          100: 'var(--color-100)',
          200: 'var(--color-200)',
          300: 'var(--colo…

Replies: 3 comments 5 replies

You must be logged in to vote
0 replies
Answer selected by fcno

You must be logged in to vote
4 replies
@simonswiss

@fcno

@simonswiss

@simonswiss

You must be logged in to vote
1 reply
@simonswiss

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Category
Help
Labels
None yet
2 participants