#Tailwind CSS Variables

6 messages · Page 1 of 1 (latest)

hard lion
# 
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --red: "#EF4444";
    --orange: "#E8590C";
    --green: "#099268";

    --accent-color: "#7567C9";
    --background-color: "#161823";
    --card-color: "#11131D";

    --sidebar-color: "#151723";
    --sidebar-hover-color: "#1C202E";

    --line-color: "#1B1E29";
    --line-two-color: "#232735";
  }
}

const config = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx,mdx}"
  ],
  prefix: "",
  theme: {
    colors: {
      "red": "var(--red)",
      "orange": "var(--orange)",
      "green": "var(--green)"
    },
    extend: {
      colors: {
        "accent": "var(--accent-color)",
        "background": "var(--background-color)",
        "card": "var(--card-color)",

        "sidebar": "#var(--sidebar-color)",
        "sidebar-hover": "var(--sidebar-hover-color)",

        "line": "var(--line-color)",
        "line-two": "var(--line-two-color)"
      }
    }
  }
}

Any ideas why my colors are showing up incorrectly?

ornate gorgeBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

tepid dew
#

Hey @hard lion Not sure which colors aren't showing up correctly, but I spot two issues in the code you pasted:

  1. In your CSS, the color values are enclosed in quotes. CSS custom properties (variables) don't need quotes for color values. Remove the quotes around the color codes. This is probably the main thing that's breaking your colors...

  2. In your Tailwind config, there's a typo in the "sidebar" color definition. You have an extra "#" before the var().

hard lion
#

all fixed, tyyy

tepid dew
#

You're welcome! Glad it helped 😁 Don't forget to "Mark Solution" on my response 🚀