Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Styles break when using with tailwind typography plugin #13

Open
thesobercoder opened this issue Sep 1, 2023 · 9 comments
Open

Styles break when using with tailwind typography plugin #13

thesobercoder opened this issue Sep 1, 2023 · 9 comments
Labels
enhancement New feature or request

Comments

@thesobercoder
Copy link

thesobercoder commented Sep 1, 2023 •
edited

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
Copy link
Contributor

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 nekowinston added the enhancement New feature or request label Sep 1, 2023
@thesobercoder
Copy link
Author

thesobercoder commented Sep 1, 2023 •
edited

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

@nekowinston
Copy link
Contributor 

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
Copy link
Author

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

@thesobercoder
Copy link
Author

@nekowinston Any update on this?

@thesobercoder
Copy link
Author

@nekowinston Hi, when will this be addressed?

@nekowinston
Copy link
Contributor

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
Copy link

Tanish2002 commented Jan 22, 2024 •
edited

@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
Copy link
Author

thesobercoder commented Jan 23, 2024 •
edited

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@thesobercoder @Tanish2002 @nekowinston