Theme function is not working properly.

[fcno]

Tailwindcss v. 1.9.5

First of all, I am almost sure that it is not a bug, but that I am doing something wrong, I just can't find the problem.

Let me show you what I'm trying to do.

My config file look like this:

// tailwind.config.js

module.exports = {
  future: {
    // removeDeprecatedGapUtilities: true,
    // purgeLayersByDefault: true,
  },
  purge: [],
  theme: {
    colors: {
      pattern: {
        100: 'var(--color-100)',
        200: 'var(--color-200)',
        300: 'var(--color-300)',
        400: 'var(--color-400)',
        500: 'var(--color-500)',
        600: 'var(--color-600)',
        700: 'var(--color-700)',
        800: 'var(--color-800)',
        900: 'var(--color-900)',
        },
      },
    },
    extend: {
      fontFamily: {
        'logo': ['Monoton','Bungee Shade','Sirin Stencil'],
      },
  },
  variants: {},
  plugins: [],
}

My CSS file looks like this and do not work to generate some classes if I use the theme function:

// app.css
@import url('https://fonts.googleapis.com/css2?family=Bungee+Shade&family=Monoton&family=Sirin+Stencil&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --color-100: theme("colors.green.100"); // Do not work
  --color-200: theme("colors.green.200"); // Do not work
  --color-300: theme("colors.green.300"); // Do not work
  --color-400: red; // Work
  --color-500: #abc; // Work
  --color-600: theme("colors.green.600"); // Do not work
  --color-700: theme("colors.green.700"); // Do not work
  --color-800: theme("colors.green.800"); // Do not work
  --color-900: theme("colors.green.900"); // Do not work
}

And this is my laravel mix file

// webpack.mix.js
const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        require('tailwindcss'),
    ]);

When running the npm run dev command, classes that make use of theme function to bind the variable doesn't work.

Another thing that happens is that when I add a new font, as standard fonts defined by the framework stop working, a mono font for example.

Can you tell me what I'm doing wrong?

[simonswiss]

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(--color-300)',
          400: 'var(--color-400)',
          500: 'var(--color-500)',
          600: 'var(--color-600)',
          700: 'var(--color-700)',
          800: 'var(--color-800)',
          900: 'var(--color-900)',
          },
        },
      }
      fontFamily: {
        'logo': ['Monoton','Bungee Shade','Sirin Stencil'],
      },
+  },
  variants: {},
  plugins: [],
}

Sice you overrode the default theme colors, theme("colors.green.100") and any shade of green does not exist anymore - your colors are only the pattern shade.

You can read about the difference between overriding and extending the default theme here: https://tailwindcss.com/docs/theme#overriding-the-default-theme

Here's a little Tailwind Play setup of your config/CSS working: https://play.tailwindcss.com/RarBzP2wxI

Hope it helps! 👍

[fcno]

Hey @simonswiss .
Thanks for the answer.
I had already read this document that you posted. The problem is that with this Tailwind Play you put me in a tight spot, because you prove that the configuration is working, but somehow, I can't extend the functionality. When I try to extend them, they don't work, only the defaults work.
Any idea?
In the example I gave, my font doesn't work, only the default ones.

[simonswiss]

Hey, not sure I understand what you mean by

I can't extend the functionality. When I try to extend them, they don't work, only the defaults work.

Could you expand on the demo Taliwind Play example?

In the example I gave, my font doesn't work, only the default ones.

The font probably doesn't work because you're not loading the CSS necessary to render the custom font. But the font-logo class gets generated, and if you change the value to an available font (like 'Trebuchet MS' for example), it will work properly.

[fcno]

Hey, not sure I understand what you mean by

I can't extend the functionality. When I try to extend them, they don't work, only the defaults work.
Hey.

Probably a language barrier, since my English is not fluent. But let me try to be clearer.

If I overwrite the fonts or colors, they work but as I am not extending them, the default values ​​of the framework for fonts and colors no longer work (expected behavior).

However, if I extend them, the default values ​​work again (expected behavior), but the values ​​that were extended do not work (unexpected behavior).

In the specific case of fonts, I think the @import in the main css was sufficient for both cases (extension or overwriting).

About tailwind play, I can't reproduce the error, because in play everything seems to work.

Anyway, I will try to recreate a new project to see if the problem persists. Apparently, it seems to be elsewhere and not in the tailwind framework.

[simonswiss]

Hey,

Thanks for clarifying. If you share a git repo with your problem, I can take a look for you 👍

[simonswiss]

Oh, just say your response below - glad it's sorted!

[fcno]

@simonswiss Everything is working fine on a new project. Looks like there is something wrong with my old project.

thx for your help.

[simonswiss]

Glad to hear this 👍