Losing intellisense and removing existing Tailwind colors

[pauldemarco]

Hi Javier,

This is exactly what i was looking for, but I'm having some trouble implementing. Here's my new tailwind.config.js with the changes applied:

const { withMaterialColors } = require('tailwind-material-colors');

/** @type {import('tailwindcss').Config} */
export default withMaterialColors(
    {
        content: ['./src/**/*.{html,js,svelte,ts}'],
        darkMode: 'class',
        theme: {
            extend: {}
        },
        plugins: []
    },
    {
        // Here, your base colors as HEX values
        // primary is required
        primary: '#ff0000',
        // secondary and/or tertiary are optional, if not set they will be derived from the primary color
        secondary: '#ffff00',
        tertiary: '#0000ff',
        // extra named colors may also be included
        green: '#00ff00',
        blue: '#0000ff'
    }
);

The problem is I'm losing all Intellisense (VScode) support for the theme structure, and postcss complains about dark:bg-gray-500 class does not exist (so I'm thinking it broke everything).

Any ideas?

[pauldemarco]

Alright, so some further debugging, it really does look like the original bg-X classes are all gone. Does this wrapper remove them?

[pauldemarco]

Got Intellisense back by separating out the theme object:

import { withMaterialColors } from 'tailwind-material-colors';

/** @type {import('tailwindcss').Config} */
const theme = {
    content: ['./src/**/*.{html,js,svelte,ts}'],
    darkMode: 'class',
    theme: {
        extend: {}
    },
    plugins: []
};

export default withMaterialColors(theme, {
    // Here, your base colors as HEX values
    // primary is required
    primary: '#ff0000',
    // secondary and/or tertiary are optional, if not set they will be derived from the primary color
    secondary: '#ffff00',
    tertiary: '#0000ff',
    // extra named colors may also be included
    green: '#00ff00',
    blue: '#0000ff'
});

It does seem to be removing all of tailwind's existing colors bg-red-500, etc. For those of us trying to migrate an existing website, we will need these tailwind colors to stick around. Would this be an easy fix? Maybe by using a different prefix somewhere in the library?

Edit: I also do see the benefit of removing the Tailwind color palette, since it forces the user to make a decision with one of the Material's palette (also smaller bundle size?). Maybe this could be configurable, override:true?

[JavierM42]

The intellisense thing is... weird. I get code completion (including colors) with this tailwind.config.js file, with no issues.

const { withMaterialColors } = require("tailwind-material-colors");

/** @type {import('tailwindcss').Config} */
module.exports = withMaterialColors(
  {
    content: [
      "./components/**/*.{js,jsx,ts,tsx}",
      "./pages/**/*.{js,jsx,ts,tsx}",
    ],
    theme: {
      extend: {},
    },
    plugins: [],
    darkMode: "class",
  },
  {
    primary: "#506546",
  }
);

I have v0.10.0 of the Tailwind CSS IntelliSense plugin and it works for me. No idea what's happening, but I'm glad you found a workaround.

---

As for the default color palette being replaced, yes, that's how the plugin works. Luckily, adding a config option for it to extend instead of replace is pretty easy. I'll get it done this week 🙂

[JavierM42]

After re-reading your question, I now understand that Intellisense was broken only for the theme object, not globally. Your workaround seems to work fine.

[JavierM42]

@pauldemarco if you use the latest version (1.1.2) and follow the instructions on the docs, you should be able to extend the default Tailwind palette. Let me know how it goes, I'll keep the issue open for a few days just in case.

[pauldemarco]

@JavierM42 This doesn't seem to be working for me. I've followed the config from the README:

import { withMaterialColors } from 'tailwind-material-colors';

/** @type {import('tailwindcss').Config} */
const theme = {
    content: ['./src/**/*.{html,js,svelte,ts}'],
    darkMode: 'class',
    theme: {
        extend: {
            colors: {
                yellow: '#ddff00'
            }
        }
    },
    plugins: [require('@tailwindcss/forms')]
};

export default withMaterialColors(theme, {
    // Here, your base colors as HEX values
    // primary is required
    primary: '#ff00ff'
    // secondary and/or tertiary are optional, if not set they will be derived from the primary color
    // secondary: '#d8ff00',
    // tertiary: '#d8ff00',
    // extra named colors may also be included
    // yellow: '#00ff00'
},
{
    // Extend the existing tailwind color palette: set to false to remove them
    extend: true,
}
);

Still getting the errors saying things like colors.magnum.500 do not exist.

[JavierM42]

I can't find magnum-500 in the default color palette for the latest Tailwind version (3.3.3).

https://tailwindcss.com/docs/customizing-colors

[pauldemarco]

I can't find magnum-500 in the default color palette for the latest Tailwind version (3.3.3).

https://tailwindcss.com/docs/customizing-colors

Sorry, yep, try gray.

[JavierM42]

Here's a CodeSandbox example, it uses the default palette, as well as a custom color and the material colors. Let me know if that helps :)

[pauldemarco]

Oh interesting. I’m using SvelteKit. Maybe something’s up with that.

On Tue, Sep 12, 2023 at 15:22 Javier Morales @.***> wrote:

Here's a CodeSandbox https://codesandbox.io/s/tailwind-material-colors-example-fdxjdz?file=/src/App.js example, it uses the default palette, as well as a custom color and the material colors. Let me know if that helps :)

— Reply to this email directly, view it on GitHub https://github.com/JavierM42/tailwind-material-colors/issues/2#issuecomment-1716289613, or unsubscribe https://github.com/notifications/unsubscribe-auth/AD7TN5Q5GOZZENBGUK7DU2LX2CY6TANCNFSM6AAAAAA4ROMDWM . You are receiving this because you were mentioned.Message ID: @.***>

[JavierM42]

I've never used Svelte at all, so all I can do is wish you luck.

[pauldemarco]

I'm not exactly sure what happened but it's working now!

[pauldemarco]

thanks Javier!