-
Notifications
You must be signed in to change notification settings - Fork 64
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Feature Request: Tailwind Plugin #10
Comments
Great suggestion! I wanted to add that others thought of this as well. |
Hacked this up real quick because I was playing with something. It might be useful for others. I was going to put up a PR but wasn't sure how best to approach without bothering the authors and wasn't sure if it would just be better in another repo all together. Here it is if someone wants to run with it. tailwindcss-radix-ui-colors.jsconst colors = require('@radix-ui/colors')
const mapKeys = (object, cb) =>
Object
.entries(object)
.reduce((out, [key, value]) => ({
...out,
[cb(key)]: typeof value === "object"
? mapKeys(value, cb)
: value,
}), {})
// Just makes the names more Tailwindish.
const keyTransformer = key => {
if (key.endsWith('DarkA')) {
return key.replace('DarkA', '-dark-alpha')
} else if (key.endsWith('Dark')) {
return key.replace('Dark', '-dark')
} else if (key.endsWith('A')) {
return key.replace('A', '-alpha')
}
return /\d$/.test(key)
// Removes the color name and A from the color key...
? key.replace(/[a-z]/gi, '')
: key
}
module.exports = mapKeys(
colors,
keyTransformer
) tailwind.config.js
A quick preview of it being used in Tailwind Intellisense. |
If no plugin, at least a page in the documentation about how to quickly configure Tailwind to use one the colors. |
Put together a quick Tailwind plugin based on the @crswll's solution. radixui-colors-tailwind.jsconst plugin = require('tailwindcss/plugin');
const radixColors = require('@radix-ui/colors');
const transformedColors = Object
.entries(radixColors)
.reduce((acc, [paletteName, palette]) => {
// Transform the palette names so they look more Tailwind-ish
paletteName = paletteName
.replace(/A$/, '-alpha')
.replace(/Dark/, '-dark');
// Remove the color name and 'A' from hue levels
palette = Object
.entries(palette)
.reduce((acc, [hueLevel, color]) => {
hueLevel = hueLevel.replace(/[a-z]/gi, '');
acc[hueLevel] = color;
return acc;
}, {});
acc[paletteName] = palette;
return acc;
}, {});
module.exports = plugin(({}) => {}, {
theme: {
extend: {
colors: {
...transformedColors,
},
},
},
}); tailwind.config.jsplugins : [
require('./radixui-colors-tailwind'),
] VSCode preview |
how can automatic dark mode can be applied with this method?
|
@raiyansarker I have a plugin that will "swap" Tailwind themes (but it really composes them). It uses custom properties so adding transparency the Tailwind way might not work... like |
A while ago I built a plugin (installable via npm) that accomplishes a similar thing - it has support for radix colors and the palette of course, but also theme swapping, overrides and even pinning subsets of the page to specific themes. You can also choose to exclude parts of the palette as part of configuration :) Sharing here in case it helps @nonissue @crswll You can swap themes automatically by just specifying the base color Fair warning - only quirky bit is from feedback I've heard the single numbers in the radix palette (1-12) were a bit hard so swap so they look a little more tailwind-y (palette is identical but numeric codes are x100) but I've used it on a few projects now and it's been working well - would love any feedback if you end up trying it out and have any issues! |
Based on https://fynn.at/shorts/2023-03-19-how-to-use-radix-colors-with-tailwind-css, to replace (not extend) tailwind colors with radix colors:
style.css:
tailwind.config.js:
|
I absolutely love this project — the palette itself is stunning, and the documentation and guidance is extremely useful and reflects a tremendous amount of thoughtfulness and deliberation.
That said, I currently have several projects that rely on Tailwind, and even though I'd like to experiment with the radix colors, it's not easy.
What I'm currently doing is this (in my tailwind.config.js).
It's kind of clunky, and so I was wondering if there has been any consideration in making the colors available as a tailwind plugin to simplify the process?
If you don't plan on adding tailwind support, but still think it's worthwhile, it may be something I'm able to do myself.
Thanks for the great project!
The text was updated successfully, but these errors were encountered: