[KnowHow]: Tallstackui + Mary-UI + Daisy-UI

[cord]

The Issue

When installing Tallstackui together with Mary-ui the tailwind stylings are overwritten by daisy-ui.

Here is how to fix this (thx to ChatGPT):

The Solution

To prevent the settings from tallstackui defined in vendor/tallstackui/tallstackui/tailwind.config.js from being overwritten by daisyui, you can adjust the configuration to merge the settings rather than completely replacing them. You can achieve this by using the lodash merge function or a similar utility. Here's how you can modify your tailwind.config.js file to achieve this:

const _ = require('lodash');
const tallstackuiConfig = require('vendor/tallstackui/tallstackui/tailwind.config.js');
const daisyui = require('daisyui');

module.exports = {
  mode: 'jit',
  purge: [...],
  theme: {
    extend: _.merge({}, tallstackuiConfig.theme.extend, {
      colors: {
        // Add your custom colors here if needed
      },
      // Add other customizations as needed
    }),
  },
  plugins: [
    daisyui,
    // Add other plugins as needed
  ],
};

[devajmeireles]

Thanks. I'll keep this issue open until I doc this.

[open-soft-app]

I successfully used the script, but with two additions/changes:

- "./vendor/tallstackui/tallstackui/tailwind.config.js" and not "vendor/tallstackui/tallstackui/tailwind.config.js" in the script

• I put a prefix for tallstackui (in the .env file I put TALLSTACKUI_PREFIX="ts-" )

[devajmeireles]

Closing. I'll write this into v2 docs.