Use presets to override some classes

[Limunce]

Hello, is it possible somehow to use presets to override classes from core tailwind.config?

For example, I want to have tailwind.config file that I will use as core file with classes, but on the specific project, I want to override only shadow values inside tailwind config.

Tailwind config inside core :

module.exports = {

    prefix: '',
    important: false,
    separator: ':',
    theme: {
 
      boxShadow: {
        1: '0 20px 10px 0 rgba(122, 132, 132, 0.6)',
        2: '0 10px 3px 3px rgba(136,103,129,0.4)',
        3: '0 1px 1px 0 rgba(119, 129, 219, 0.5)',
       
        none: 'none'
      },
    }}

But in the specific project I want to override these values:

module.exports = {
    theme: {
      boxShadow: {
        1: '0 1px 1px 0 rgba(102, 102, 102, 0.6)',
        2: '0 8px 8px 0px rgba(106,103,119,0.4)',
      },
    }}

I hope that you understand me :)
I saw this https://tailwindcss.com/docs/presets, but it won't work for some reason.

using CRA with styled components

[ben-rogerson]

Hey there

Yes, presets is perfect for this.

Here's an example of the preset usage that's working in my tests:

// tailwind.config.js

const myConfigDefault = {
  theme: {
    boxShadow: {
      1: "old-shadow",
    },
  },
};

module.exports = {
  presets: [myConfigDefault],
  theme: {
    boxShadow: {
      1: "new-shadow",
    },
  },
};

// Usage

tw`shadow-1`;

// ↓ ↓ ↓ ↓ ↓ ↓

({
  "--tw-shadow": "new-shadow",
  "boxShadow": "var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)"
});

Does that help?

[Limunce]

Oh, my bad, I was trying the other way around.

Thanks very much, Ben :)