Theo's Typesafe Cult•2y ago

[Tailwind&Prisma] How can you tie a tailwind color configuration to a prisma enum❓

Context: - You persist a user setting in your db, e.g. “primaryColor” - The CSS styles for this are applied via tailwindcss Problem: - I don’t want to store stuff like “primaryColorDark” as well in the DB -- tailwind’s config is my source of truth for that - However, adding a color now requires a whole db migration

11 Replies

Matvey•2y ago

This is a great use case for css variables. You can store the color hex code in the DB for each user and set the Tailwind config to something like this. Now you can use classes like text-primary and set the correct --color-primary variable for each user

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: "var(--color-primary)"
      },
    },
  },
};

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: "var(--color-primary)"
      },
    },
  },
};

Neto•2y ago

and the implementation is like this https://github.com/stneto1/tw-react-theme you just need to populate the store with the possible theme values from prisma

p6l.richard•2y ago

But what if I don't want to define the primary, secondary etc. myself but use something predefined, like radix-colors instead? https://github.com/brattonross/windy-radix-palette

GitHub

GitHub - brattonross/windy-radix-palette: Bring Radix Colors to Tai...

Bring Radix Colors to Tailwind CSS. Contribute to brattonross/windy-radix-palette development by creating an account on GitHub.

p6l.richard•2y ago

const radixColors = require("@radix-ui/colors");

module.exports = {
    plugins: [
        require("windy-radix-palette")({
            colors: {
                mauveA: radixColors.mauveA,
                mauveDarkA: radixColors.mauveDarkA,
                red: radixColors.red,
                redDark: radixColors.redDark,
            },
        }),
    ],
};

const radixColors = require("@radix-ui/colors");

module.exports = {
    plugins: [
        require("windy-radix-palette")({
            colors: {
                mauveA: radixColors.mauveA,
                mauveDarkA: radixColors.mauveDarkA,
                red: radixColors.red,
                redDark: radixColors.redDark,
            },
        }),
    ],
};

Neto•2y ago

the color type is a generic type you can change to whatever you like you can switch from Color type to the radix color would change that the code should do

p6l.richard•2y ago

Okay What's your recommendation for storing the color hex code in the database? In it's own table?

model User {
  id    String @id @default(cuid())
  color Color
}

model Color {
    id            String @id @default(cuid())
    hexCode       String
    colorVariable ColorVariable
}

/// all the color strings from e.g radix-colors or whatev
enum ColorVariable {
  mauveA
  mauveDarkA
  red
  redDark
}

model User {
  id    String @id @default(cuid())
  color Color
}

model Color {
    id            String @id @default(cuid())
    hexCode       String
    colorVariable ColorVariable
}

/// all the color strings from e.g radix-colors or whatev
enum ColorVariable {
  mauveA
  mauveDarkA
  red
  redDark
}

I don't quite understand why I would store the hexCode in the database as well. Like, wouldn't the colorVariable (or however you'd define this) be enough and then simply use the class names for applying the color? I haven't worked with css variables a lot, so I'm a bit ignorant of the benefit.

Neto•2y ago

if you plan on using radix colors you can make a soft link between them on the database you store the theme and load on client

const radixColors = require("@radix-ui/colors");

// T should be the redix color type
type T = any

const colors = fetchFromPrisma()

const themes: Record<string, T> = colors.map((c) => ({
  [c.name]: redixColors[name]
})

const radixColors = require("@radix-ui/colors");

// T should be the redix color type
type T = any

const colors = fetchFromPrisma()

const themes: Record<string, T> = colors.map((c) => ({
  [c.name]: redixColors[name]
})

something like this

p6l.richard•2y ago

Oh interesting For clarification: you mean redixColors[c.name] right? I think this could be what I was looking for. 🙌

Neto•2y ago

yea discord isnt a good poohheh

p6l.richard•2y ago

fair Do you know if there's a way for me to obtain the hex value at runtime?

console.log({ col: fullConfig.theme?.textColor.mauveA[9] }); // "var(--mauveA9)"

console.log({ col: fullConfig.theme?.textColor.mauveA[9] }); // "var(--mauveA9)"

Instead of the variable string, I'd need the hex value. :/

Neto•2y ago

You have to check the radix theme for hex values

Gaming

Programming

[Tailwind&Prisma] How can you tie a tailwind color configuration to a prisma enum❓