tailwindcss icon indicating copy to clipboard operation
tailwindcss copied to clipboard

Published 20 hours ago • verified publisher icon catppuccin

Styles break when using with tailwind typography plugin

Open thesobercoder opened this issue 2 years ago • 9 comments

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"),
  ],
};

thesobercoder avatar Sep 01 '23 16:09 thesobercoder

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)

nekowinston avatar Sep 01 '23 16:09 nekowinston

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

thesobercoder avatar Sep 01 '23 16:09 thesobercoder 

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. 🤞

nekowinston avatar Sep 01 '23 16:09 nekowinston

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

thesobercoder avatar Sep 01 '23 16:09 thesobercoder

@nekowinston Any update on this?

thesobercoder avatar Oct 04 '23 09:10 thesobercoder

@nekowinston Hi, when will this be addressed?

thesobercoder avatar Nov 11 '23 16:11 thesobercoder

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

nekowinston avatar Nov 11 '23 17:11 nekowinston

@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 avatar Jan 22 '24 13:01 Tanish2002

@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`),
      },
    },
  }),
},

thesobercoder avatar Jan 23 '24 07:01 thesobercoder