Theo's Typesafe Cult•2y ago

Tailwind Theming using CSS variables

Hey all, using shadcn for styling and they use the css variables like so, recommended by tailwind. https://tailwindcss.com/docs/customizing-colors#using-css-variables

@tailwind base;
@tailwind components;
@tailwind utilities;
 
@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
 
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
 
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
 
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
     
    [...]

@tailwind base;
@tailwind components;
@tailwind utilities;
 
@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
 
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
 
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
 
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
     
    [...]

I'm just wondering, is there a way to use already declared tailwind colours here? Or maybe a VScode plugin that would allow me to convert hex to hsl quickly? I just figured you can just punch in the rgb values too which probably will work ok for me as I can just pick out the tailwind colours I want from my browser I found this which is probably the same issue: https://github.com/shadcn-ui/ui/issues/199 But yeah in the time it's taken to look all that up I could have just converted the colours I need to HSL 😪 I put a lot of effort into being lazy

GitHub

CSS Theming hsl variables -> problem with Tailwind Intellisense VSC...

I was really looking forward to using the new themes and setting my new color variables However, The most important part (for me) is being able to fully take advantage of Tailwind CSS Intelisense p...

Customizing Colors - Tailwind CSS

Customizing the default color palette for your project.

5 Replies

JimOP•2y ago

https://github.com/shadcn-ui/ui/issues/215 its a bit of a pain point for a few people it seems

GitHub

Put full colors in CSS variables · Issue #215 · shadcn-ui/ui

I'm not sure if there is a reasoning behind the current way, but why do we have: module.exports = { theme: { extend: { colors: { border: "hsl(var(--primary))", } } } } And then: @laye...

JimOP•2y ago

ok ended up getting rid of variables and used defaults in the tw-config like so:

const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    extend: {
      colors: {
        border: colors.zinc[200],
        input: colors.zinc[200],
        ring: colors.zinc[400],
        background: colors.white,
        foreground: colors.zinc[950],
        primary: {
          DEFAULT: colors.red[500],
          foreground: colors.white,
        },
        secondary: {
          DEFAULT: colors.zinc[100],
          foreground: colors.zinc[950],
        },
        destructive: {
          DEFAULT: colors.red[500],
          foreground: colors.zinc[50],
        },
        muted: {
          DEFAULT: colors.zinc[100],
          foreground: colors.zinc[500],
        },

const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    extend: {
      colors: {
        border: colors.zinc[200],
        input: colors.zinc[200],
        ring: colors.zinc[400],
        background: colors.white,
        foreground: colors.zinc[950],
        primary: {
          DEFAULT: colors.red[500],
          foreground: colors.white,
        },
        secondary: {
          DEFAULT: colors.zinc[100],
          foreground: colors.zinc[950],
        },
        destructive: {
          DEFAULT: colors.red[500],
          foreground: colors.zinc[50],
        },
        muted: {
          DEFAULT: colors.zinc[100],
          foreground: colors.zinc[500],
        },

https://v1.tailwindcss.com/docs/customizing-colors#naming-your-colors Now I get highlighting in my components, dont need dark mode so 🤷

Customizing Colors - Tailwind CSS

Customizing the default color palette for your project.

iDarkLightning•2y ago

yeah css variables are great if you need different colour themes...otherwise not so much i honestly was not a fan of shadcn's decision to switch his component manual-installs to use specific tokens from a tw config

JimOP•2y ago

Yeah its a hard one to balance, I think what shadcn/ui is trying to offer is 'best practices', and using theme colours is the way to go. I think if they stuck with referencing tw colours direct, you'd see a lot of people just replacing the colours and not referencing them to a theme, which I think is fine, but just not that scalable. Maybe they could add another cli option 😂

iDarkLightning•2y ago

I think that the manual install should be with the tw colours and then the cli can use tokens But that does create more complexity in terms of maintenance so I understand why that wasn't the direction they went in

Gaming

Programming

Tailwind Theming using CSS variables