Extending theme.colors in tailwind config using default colors object and a core plugin
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!
Now I've learned a bit more about the normal Tailwind setup, I see it's not expected for us to have access to this object unless we import it: e.g.
const colors = require('tailwindcss/colors');
So I'm happy if you'd prefer to close this, but I will leave it up for now in case there is an easy answer.