Custom Tailwindcss theme with Extension.js

[mitchgillin]

Howdy folks;

I have been developing with Extension JS and loving it. My only issue has been getting it to recognize the custom color theme I have (see below). I've tested this with a vanilla JS project and a NextJS project and this works for both of those.

popup/base.css

@tailwind base;
@tailwind components;
@tailwind utilities;

tailwind.config.ts

import type { Config } from 'tailwindcss';
const {
  default: flattenColorPalette,
} = require('tailwindcss/lib/util/flattenColorPalette');

const config: Config = {
  content: [
    './**/*.{html,js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      colors: {
        primary: {
          '50': 'hsl(180, 5%, 96%)',
          '100': 'hsl(200, 6%, 90%)',
          '200': 'hsl(204, 5%, 82%)',
          '300': 'hsl(203, 5%, 69%)',
          '400': 'hsl(205, 5%, 53%)',
          '500': 'hsl(203, 5%, 47%)',
          '600': 'hsl(204, 5%, 36%)',
          '700': 'hsl(210, 5%, 31%)',
          '800': 'hsl(210, 4%, 27%)',
          '900': 'hsl(204, 4%, 24%)',
          '950': 'hsl(210, 5%, 15%)',
        },
        secondary: {
          50: "#FEF9EC",
          100: "#FCF1D4",
          200: "#F9E4A9",
          300: "#F6D883",
          400: "#F3CA58",
          500: "#F0BC2D",
          600: "#D6A10F",
          700: "#A27A0C",
          800: "#694F07",
          900: "#342704",
          950: "#1D1502"
        },
      },
      fontFamily: {
        ibm_plex: 'var(--font-ibm-plex-sans)',
      }
    },
  },
  plugins: [addVariablesForColors],
};

function addVariablesForColors({ addBase, theme }: any) {
  let allColors = flattenColorPalette(theme('colors'));
  let newVars = Object.fromEntries(
    Object.entries(allColors).map(([key, val]) => [`--${key}`, val])
  );

  addBase({
    ':root': newVars,
  });
}

export default config;

[OSpoon]

Hi~,

I created two extensions using React-TypeScript and Vue-TypeScript respectively, and the custom colors are correctly recognized in VSCode. I wonder if you could provide me with more information?

https://github.com/cezaraugusto/extension.js/assets/10126623/5a2e11f6-f64c-4ccf-8ce1-10c5c34d0a38

https://github.com/cezaraugusto/extension.js/assets/10126623/18110a33-bbc0-4a0c-8c9d-3fa1034b816d

[cezaraugusto]

hi @mitchgillin, thanks for reporting. Could you provide us some sample repo so we can try to reproduce the issue?

[mitchgillin]

Will do! On Jun 6, 2024, at 18:51, Cezar Augusto @.***> wrote: hi @mitchgillin, thanks for reporting. Could you provide us some sample repo so we can try to reproduce the issue?

—Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you were mentioned.Message ID: @.***>

[mitchgillin]

@cezaraugusto, First of all thank you so much for kicking off and maintaining this project; it has been awesome to work with 😄

Here is the repo; apologies if it is something simple I am overlooking. https://github.com/mitchgillin/custom-tailwind-extension-js. I bootstrapped it using --template=react-typescript.

[OSpoon]

@cezaraugusto, First of all thank you so much for kicking off and maintaining this project; it has been awesome to work with 😄首先，非常感谢您启动和维护这个项目;与您合作非常棒。

Here is the repo; apologies if it is something simple I am overlooking. mitchgillin/custom-tailwind-extension-js. I bootstrapped it using --template=react-typescript.这里是回购;如果它是简单的东西，我忽略了道歉。mitchgillin/custom-tailwind-extension-js.我使用--template=react-typescript引导它。

I'm sorry, I think the repo you provided might not have any issues because I can easily identify them in VSCode. It's possible that I didn't fully understand your issues.

[mitchgillin]

Hey @OSpoon , you're understanding it perfectly. We are getting different outputs however, so it may be a problem on my end 😞. This is what I am seeing:

[cezaraugusto]

@mitchgillin hey there! we did a bunch of updates recently, might giving it another go using the latest release?

# The @latest part is important, npx applies some heavy caching
npx extension@latest create my-extension --template=react-typescript

Thanks!

[cezaraugusto]

going to close this one as solved given the amount of patches we added after this issue creation. @mitchgillin feel free to check https://extension.js.org/docs/getting-started/templates where we list all the publicly supported templates and please let me know if the Tailwind option is still buggy for you. thanks!