Skip to content
This repository was archived by the owner on Sep 12, 2023. It is now read-only.
This repository was archived by the owner on Sep 12, 2023. It is now read-only.

Extending theme.colors in tailwind config using default colors object and a core plugin #10

@MattJonesSiteglide

Description

@MattJonesSiteglide

When I use the following config I get the expected results. Tailwind, classes containing "-secondary" use the purple palette.

<script type="tailwind-config">
  {
    theme: {
      extend: {
        colors: {
          primary: {
            "50":"#eff6ff","100":"#dbeafe","200":"#bfdbfe","300":"#93c5fd","400":"#60a5fa","500":"#3b82f6","600":"#2563eb","700":"#1d4ed8","800":"#1e40af","900":"#1e3a8a"
          },
          secondary: colors.purple
        }
      }
    }
  }
</script>

However, if I want to carry out the same extension whilst also using the Typography plugin as demonstrated in the docs, the "colors" object for the existing purple palette is not defined in that scope. e.g. "Uncaught ReferenceError: colors is not defined"

<script type="module" >
import tailwindcssTypography from 'https://cdn.skypack.dev/@tailwindcss/typography';

window.tailwindConfig = {
   plugins: [
     tailwindcssTypography,
   ],
  theme: {
    extend: {
      colors: {
        primary: {
        "50":"#eff6ff","100":"#dbeafe","200":"#bfdbfe","300":"#93c5fd","400":"#60a5fa","500":"#3b82f6","600":"#2563eb","700":"#1d4ed8","800":"#1e40af","900":"#1e3a8a"
        },
        secondary: colors.purple
      }
    }
  }
};

window.tailwindCSS.refresh();
</script>
<script type="tailwind-config">
window.tailwindConfig
</script>

One solution is to define a new variable containing the original colors from tailwind and reference this, however I wondered if there was a better way I hadn't thought of? Since the colors object is already available within the tailwind-config type script?

Thanks for all the work on this tool!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions