search

catppuccin / tailwindcss

💨 Soothing pastel theme for Tailwind CSS
https://tailwindcss.catppuccin.com/
MIT License
389 stars 6 forks source link

Styles break when using with tailwind typography plugin #13

Open thesobercoder opened 1 year ago

thesobercoder commented 1 year ago

The colors from the Catppuccin plugin don't override the colors injected into the .prose class. I've managed to fix a few, but I'm uncertain if this is the correct way, and the plugin should take care of it out of the box or there should be documentation around it.

Also, for some reason, setting colors from the theme is not working. For example setting the "--tw-prose-links": theme("colors.sky"), doesn't work.

const defaultTheme = require("tailwindcss/defaultTheme");

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
  darkMode: "media",
  theme: {
    extend: {
      fontFamily: {
        sans: ["Inter", ...defaultTheme.fontFamily.sans],
      },
      typography: (theme) => {
        console.log(theme("colors.text"));
        return {
          DEFAULT: {
            css: {
              "--tw-prose-body": "rgb(var(--ctp-text))",
              "--tw-prose-headings": "rgb(var(--ctp-text))",
              "--tw-prose-lead": "rgb(var(--ctp-text))",
              "--tw-prose-links": "rgb(var(--ctp-sky))",
              "--tw-prose-bold": "rgb(var(--ctp-text))",
              "--tw-prose-counters": theme("colors.pink[600]"),
              "--tw-prose-bullets": theme("colors.pink[400]"),
              "--tw-prose-hr": theme("colors.pink[300]"),
              "--tw-prose-quotes": "rgb(var(--ctp-text))",
              "--tw-prose-quote-borders": theme("colors.pink[300]"),
              "--tw-prose-captions": theme("colors.pink[700]"),
              "--tw-prose-code": "rgb(var(--ctp-text))",
              "--tw-prose-pre-code": theme("colors.pink[100]"),
              "--tw-prose-pre-bg": "rgb(var(--ctp-text))",
              "--tw-prose-th-borders": theme("colors.pink[300]"),
              "--tw-prose-td-borders": theme("colors.pink[200]"),
              "--tw-prose-invert-body": theme("colors.pink[200]"),
              "--tw-prose-invert-headings": theme("colors.white"),
              "--tw-prose-invert-lead": theme("colors.pink[300]"),
              "--tw-prose-invert-links": theme("colors.white"),
              "--tw-prose-invert-bold": theme("colors.white"),
              "--tw-prose-invert-counters": theme("colors.pink[400]"),
              "--tw-prose-invert-bullets": theme("colors.pink[600]"),
              "--tw-prose-invert-hr": theme("colors.pink[700]"),
              "--tw-prose-invert-quotes": theme("colors.pink[100]"),
              "--tw-prose-invert-quote-borders": theme("colors.pink[700]"),
              "--tw-prose-invert-captions": theme("colors.pink[400]"),
              "--tw-prose-invert-code": theme("colors.white"),
              "--tw-prose-invert-pre-code": theme("colors.pink[300]"),
              "--tw-prose-invert-pre-bg": "rgb(0 0 0 / 50%)",
              "--tw-prose-invert-th-borders": theme("colors.pink[600]"),
              "--tw-prose-invert-td-borders": theme("colors.pink[700]"),
            },
          },
        };
      },
    },
  },
  plugins: [
    require("@catppuccin/tailwindcss"),
    require("@tailwindcss/typography"),
  ],
};
nekowinston commented 1 year ago

Hey there 🙂

Official support for the typography plugin is planned for the next release, with full support for accent colors, just need to work on some finishing touches. (#12 will be the PR that adds support)

thesobercoder commented 1 year ago

@nekowinston Wow that was fast 😄. Any idea when #12 will be merged? Also, any workaround until the update comes?

nekowinston commented 1 year ago 
const accent = "pink";
const linkColor = "sky";

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/*.html",
  ],
  theme: {
    extend: {
      typography: (theme) => ({
        DEFAULT: {
          css: {
            "--tw-prose-body": theme("colors.text.DEFAULT"),
            "--tw-prose-headings": theme(`colors.${accent}.DEFAULT`),
            "--tw-prose-lead": theme("colors.text.DEFAULT"),
            "--tw-prose-links": theme(`colors.${linkColor}.DEFAULT`),
            "--tw-prose-bold": theme(`colors.${accent}.DEFAULT`),
            "--tw-prose-counters": theme(`colors.${accent}.DEFAULT`),
            "--tw-prose-bullets": theme(`colors.${accent}.DEFAULT`),
            "--tw-prose-hr": theme(`colors.${accent}.DEFAULT`),
            "--tw-prose-quotes": theme(`colors.${accent}.DEFAULT`),
            "--tw-prose-quote-borders": theme(`colors.${accent}.DEFAULT`),
            "--tw-prose-captions": theme(`colors.${accent}.DEFAULT`),
            "--tw-prose-code": theme(`colors.${accent}.DEFAULT`),
            "--tw-prose-pre-code": theme(`colors.${accent}.DEFAULT`),
            "--tw-prose-pre-bg": theme(`colors.base.DEFAULT`),
            "--tw-prose-th-borders": theme(`colors.${accent}.DEFAULT`),
            "--tw-prose-td-borders": theme(`colors.${accent}.DEFAULT`),
            "--tw-prose-invert-body": theme(`colors.${accent}.DEFAULT`),
            "--tw-prose-invert-headings": theme("colors.white"),
            "--tw-prose-invert-lead": theme(`colors.${accent}.DEFAULT`),
            "--tw-prose-invert-links": theme("colors.white"),
            "--tw-prose-invert-bold": theme("colors.white"),
            "--tw-prose-invert-counters": theme(`colors.${accent}.DEFAULT`),
            "--tw-prose-invert-bullets": theme(`colors.${accent}.DEFAULT`),
            "--tw-prose-invert-hr": theme(`colors.${accent}.DEFAULT`),
            "--tw-prose-invert-quotes": theme(`colors.${accent}.DEFAULT`),
            "--tw-prose-invert-quote-borders": theme(`colors.${accent}.DEFAULT`),
            "--tw-prose-invert-captions": theme(`colors.${accent}.DEFAULT`),
            "--tw-prose-invert-code": theme("colors.white"),
            "--tw-prose-invert-pre-code": theme(`colors.${accent}.DEFAULT`),
            "--tw-prose-invert-pre-bg": "rgb(0 0 0 / 50%)",
            "--tw-prose-invert-th-borders": theme(`colors.${accent}.DEFAULT`),
            "--tw-prose-invert-td-borders": theme(`colors.${accent}.DEFAULT`),
          },
        },
      }),
    },
  },
  plugins: [
    require("@catppuccin/tailwindcss"),
    require("@tailwindcss/typography"),
  ],
};

Should be a working workaround, adjust colors as needed of course.

I'm currently focusing on the VSCode theme for this weekend, I'll try to publish the tailwind update next week. 🤞

thesobercoder commented 1 year ago

@nekowinston You're the best! Thanks for the quick help.

thesobercoder commented 1 year ago

@nekowinston Any update on this?

thesobercoder commented 1 year ago

@nekowinston Hi, when will this be addressed?

nekowinston commented 1 year ago

Sorry for ignoring your last ping, I forgot to reply. 😓

I've been busy focusing on other areas in Catppuccin, and I haven't been able to finish my rewrite for catppuccin/palette, which #12 depends on. It's still a local dependency in that draft https://github.com/catppuccin/tailwindcss/pull/12/files#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519R52

Tanish2002 commented 9 months ago

@thesobercoder Hey, can you provide me with your tailwind config with the modified styling for catppuccin

Also waiting #12 to be merged!😄

Edit: I've tried this:

const accent = "text";
const linkColor = "blue";

  plugins: [
    require("@catppuccin/tailwindcss")({
      prefix: "ctp",
    }),
    require("@tailwindcss/typography"),
  ],
  theme: {
    extend: {
      // @ts-ignore
      typography: (theme) => ({
        DEFAULT: {
          css: {
            "--tw-prose-body": theme(`colors.ctp.${accent}.DEFAULT`),
            "--tw-prose-headings": theme(`colors.ctp.${accent}.DEFAULT`),
            "--tw-prose-lead": theme(`colors.ctp.${accent}.DEFAULT`),
            "--tw-prose-links": theme(`colors.ctp.${linkColor}.DEFAULT`),
            "--tw-prose-bold": theme(`colors.ctp.${accent}.DEFAULT`),
            "--tw-prose-counters": theme(`colors.ctp.${accent}.DEFAULT`),
            "--tw-prose-bullets": theme(`colors.ctp.${accent}.DEFAULT`),
            "--tw-prose-hr": theme(`colors.ctp.${accent}.DEFAULT`),
            "--tw-prose-quotes": theme(`colors.ctp.${accent}.DEFAULT`),
            "--tw-prose-quote-borders": theme(`colors.ctp.${accent}.DEFAULT`),
            "--tw-prose-captions": theme(`colors.ctp.${accent}.DEFAULT`),
            "--tw-prose-code": theme(`colors.ctp.${accent}.DEFAULT`),
            "--tw-prose-pre-code": theme(`colors.ctp.${accent}.DEFAULT`),
            "--tw-prose-pre-bg": theme(`colors.ctp.base.DEFAULT`),
            "--tw-prose-th-borders": theme(`colors.ctp.${accent}.DEFAULT`),
            "--tw-prose-td-borders": theme(`colors.ctp.${accent}.DEFAULT`),

            "--tw-prose-invert-body": theme(`colors.ctp.${accent}.DEFAULT`),
            "--tw-prose-invert-headings": theme(`colors.ctp.${accent}.DEFAULT`),
            "--tw-prose-invert-lead": theme(`colors.ctp.${accent}.DEFAULT`),
            "--tw-prose-invert-links": theme(`colors.ctp.${linkColor}.DEFAULT`),
            "--tw-prose-invert-bold": theme(`colors.ctp.${accent}.DEFAULT`),
            "--tw-prose-invert-counters": theme(`colors.ctp.${accent}.DEFAULT`),
            "--tw-prose-invert-bullets": theme(`colors.ctp.${accent}.DEFAULT`),
            "--tw-prose-invert-hr": theme(`colors.ctp.${accent}.DEFAULT`),
            "--tw-prose-invert-quotes": theme(`colors.ctp.${accent}.DEFAULT`),
            "--tw-prose-invert-quote-borders": theme(
              `colors.ctp.${accent}.DEFAULT`,
            ),
            "--tw-prose-invert-captions": theme(`colors.ctp.${accent}.DEFAULT`),
            "--tw-prose-invert-code": theme(`colors.ctp.${accent}.DEFAULT`),
            "--tw-prose-invert-pre-code": theme(`colors.ctp.${accent}.DEFAULT`),
            "--tw-prose-invert-pre-bg": theme(`colors.ctp.base.DEFAULT`),
            "--tw-prose-invert-th-borders": theme(
              `colors.ctp.${accent}.DEFAULT`,
            ),
            "--tw-prose-invert-td-borders": theme(
              `colors.ctp.${accent}.DEFAULT`,
            ),
          },
        },
      }),
    },
  },

But the styles aren't applied

thesobercoder commented 9 months ago

@thesobercoder Hey, can you provide me with your tailwind config with the modified styling for catppuccin

Also waiting #12 to be merged!😄

Edit: I've tried this:

const accent = "text";
const linkColor = "blue";

  plugins: [
    require("@catppuccin/tailwindcss")({
      prefix: "ctp",
    }),
    require("@tailwindcss/typography"),
  ],
  theme: {
    extend: {
      // @ts-ignore
      typography: (theme) => ({
        DEFAULT: {
          css: {
            "--tw-prose-body": theme(`colors.ctp.${accent}.DEFAULT`),
            "--tw-prose-headings": theme(`colors.ctp.${accent}.DEFAULT`),
            "--tw-prose-lead": theme(`colors.ctp.${accent}.DEFAULT`),
            "--tw-prose-links": theme(`colors.ctp.${linkColor}.DEFAULT`),
            "--tw-prose-bold": theme(`colors.ctp.${accent}.DEFAULT`),
            "--tw-prose-counters": theme(`colors.ctp.${accent}.DEFAULT`),
            "--tw-prose-bullets": theme(`colors.ctp.${accent}.DEFAULT`),
            "--tw-prose-hr": theme(`colors.ctp.${accent}.DEFAULT`),
            "--tw-prose-quotes": theme(`colors.ctp.${accent}.DEFAULT`),
            "--tw-prose-quote-borders": theme(`colors.ctp.${accent}.DEFAULT`),
            "--tw-prose-captions": theme(`colors.ctp.${accent}.DEFAULT`),
            "--tw-prose-code": theme(`colors.ctp.${accent}.DEFAULT`),
            "--tw-prose-pre-code": theme(`colors.ctp.${accent}.DEFAULT`),
            "--tw-prose-pre-bg": theme(`colors.ctp.base.DEFAULT`),
            "--tw-prose-th-borders": theme(`colors.ctp.${accent}.DEFAULT`),
            "--tw-prose-td-borders": theme(`colors.ctp.${accent}.DEFAULT`),

            "--tw-prose-invert-body": theme(`colors.ctp.${accent}.DEFAULT`),
            "--tw-prose-invert-headings": theme(`colors.ctp.${accent}.DEFAULT`),
            "--tw-prose-invert-lead": theme(`colors.ctp.${accent}.DEFAULT`),
            "--tw-prose-invert-links": theme(`colors.ctp.${linkColor}.DEFAULT`),
            "--tw-prose-invert-bold": theme(`colors.ctp.${accent}.DEFAULT`),
            "--tw-prose-invert-counters": theme(`colors.ctp.${accent}.DEFAULT`),
            "--tw-prose-invert-bullets": theme(`colors.ctp.${accent}.DEFAULT`),
            "--tw-prose-invert-hr": theme(`colors.ctp.${accent}.DEFAULT`),
            "--tw-prose-invert-quotes": theme(`colors.ctp.${accent}.DEFAULT`),
            "--tw-prose-invert-quote-borders": theme(
              `colors.ctp.${accent}.DEFAULT`,
            ),
            "--tw-prose-invert-captions": theme(`colors.ctp.${accent}.DEFAULT`),
            "--tw-prose-invert-code": theme(`colors.ctp.${accent}.DEFAULT`),
            "--tw-prose-invert-pre-code": theme(`colors.ctp.${accent}.DEFAULT`),
            "--tw-prose-invert-pre-bg": theme(`colors.ctp.base.DEFAULT`),
            "--tw-prose-invert-th-borders": theme(
              `colors.ctp.${accent}.DEFAULT`,
            ),
            "--tw-prose-invert-td-borders": theme(
              `colors.ctp.${accent}.DEFAULT`,
            ),
          },
        },
      }),
    },
  },

But the styles aren't applied

@Tanish2002 This is what I have used.

typography: (theme) => ({
    DEFAULT: {
      css: {
        "--tw-prose-body": theme("colors.text.DEFAULT"),
        "--tw-prose-headings": theme(`colors.${accent}.DEFAULT`),
        "--tw-prose-lead": theme("colors.text.DEFAULT"),
        "--tw-prose-links": theme(`colors.${linkColor}.DEFAULT`),
        "--tw-prose-bold": theme(`colors.${accent}.DEFAULT`),
        "--tw-prose-counters": theme(`colors.${accent}.DEFAULT`),
        "--tw-prose-bullets": theme(`colors.${accent}.DEFAULT`),
        "--tw-prose-hr": theme(`colors.${accent}.DEFAULT`),
        "--tw-prose-quotes": theme(`colors.${accent}.DEFAULT`),
        "--tw-prose-quote-borders": theme(`colors.${accent}.DEFAULT`),
        "--tw-prose-captions": theme(`colors.${accent}.DEFAULT`),
        "--tw-prose-code": theme(`colors.${accent}.DEFAULT`),
        "--tw-prose-pre-code": theme(`colors.${accent}.DEFAULT`),
        "--tw-prose-pre-bg": theme(`colors.base.DEFAULT`),
        "--tw-prose-th-borders": theme(`colors.${accent}.DEFAULT`),
        "--tw-prose-td-borders": theme(`colors.${accent}.DEFAULT`),

        "--tw-prose-invert-body": theme(`colors.${accent}.DEFAULT`),
        "--tw-prose-invert-headings": theme(`colors.${accent}.DEFAULT`),
        "--tw-prose-invert-lead": theme(`colors.${accent}.DEFAULT`),
        "--tw-prose-invert-links": theme(`colors.${linkColor}.DEFAULT`),
        "--tw-prose-invert-bold": theme(`colors.${accent}.DEFAULT`),
        "--tw-prose-invert-counters": theme(`colors.${accent}.DEFAULT`),
        "--tw-prose-invert-bullets": theme(`colors.${accent}.DEFAULT`),
        "--tw-prose-invert-hr": theme(`colors.${accent}.DEFAULT`),
        "--tw-prose-invert-quotes": theme(`colors.${accent}.DEFAULT`),
        "--tw-prose-invert-quote-borders": theme(
          `colors.${accent}.DEFAULT`,
        ),
        "--tw-prose-invert-captions": theme(`colors.${accent}.DEFAULT`),
        "--tw-prose-invert-code": theme(`colors.${accent}.DEFAULT`),
        "--tw-prose-invert-pre-code": theme(`colors.${accent}.DEFAULT`),
        "--tw-prose-invert-pre-bg": theme(`colors.base.DEFAULT`),
        "--tw-prose-invert-th-borders": theme(`colors.${accent}.DEFAULT`),
        "--tw-prose-invert-td-borders": theme(`colors.${accent}.DEFAULT`),
      },
    },
  }),
},