Referencing theme config in typography customization

[klickreflex]

Great plugin and great idea for the customization syntax!

Is it possible to access raw theme values inside plugin config to avoid having to manually hard code such values?

I imagine something along:

        typography: {
            default: {
                css: {
                    color: theme('colors.pink.500'),
                },
            },
        },

[ahaseeb04]

You can already do this:

module.exports = {
    theme: {
        typography: (theme) => ({
            // ...
        })
    }
}

[adamwathan]

Yep @ahaseeb04 nailed it 👍 Works just like anything else in Tailwind in this regard:

https://tailwindcss.com/docs/theme#referencing-other-values

[wikipeter]

Can confirm this

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  purge: [],
  theme: {
    extend: {
      colors: {
        turquoise: {
          100: "#ecf6f7",
          200: "#d9eeef",
          300: "#c6e5e8",
          400: "#b3dde0",
          500: "#a0d4d8",
          600: "#80aaad",
          700: "#607f82",
          800: "#405556",
          900: "#202a2b"
        },
      },
      fontFamily: {
        'display': [
          '"Open Sans Condensed"',
          ...defaultTheme.fontFamily.sans
         ],
        'body': ['Merriweather', 'Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif']
      },
    },
    typography: theme => ({
      default: {
        css: [
          {
            h1: {
              fontFamily: theme('fontFamily.display'),
              color: theme('colors.turquoise.500'),
            },
            h2: {
              fontFamily: theme('fontFamily.body'),
              color: theme('colors.turquoise.500'),
            },
            h3: {
              fontFamily: theme('fontFamily.sans'),
              color: theme('colors.turquoise.500'),
            }
          }
        ]
      }
    })
  },
}

works for colors,

but not for fontFamily, as I end up with the following

.prose h1 {
  color: #a0d4d8;
  font-weight: 800;
  font-size: 2.25em;
  margin-top: 0;
  margin-bottom: 0.8888889em;
  line-height: 1.1111111;
  font-family: "Open Sans Condensed";
  font-family: system-ui;
  font-family: -apple-system;
  font-family: BlinkMacSystemFont;
  font-family: "Segoe UI";
  font-family: Roboto;
  font-family: "Helvetica Neue";
  font-family: Arial;
  font-family: "Noto Sans";
  font-family: sans-serif;
  font-family: "Apple Color Emoji";
  font-family: "Segoe UI Emoji";
  font-family: "Segoe UI Symbol";
  font-family: "Noto Color Emoji";
}

.prose h2 {
  color: #a0d4d8;
  font-weight: 700;
  font-size: 1.5em;
  margin-top: 2em;
  margin-bottom: 1em;
  line-height: 1.3333333;
  font-family: Merriweather;
  font-family: Georgia;
  font-family: Cambria;
  font-family: "Times New Roman";
  font-family: Times;
  font-family: serif;
}

.prose h3 {
  color: #a0d4d8;
  font-weight: 600;
  font-size: 1.25em;
  margin-top: 1.6em;
  margin-bottom: 0.6em;
  line-height: 1.6;
  font-family: system-ui;
  font-family: -apple-system;
  font-family: BlinkMacSystemFont;
  font-family: "Segoe UI";
  font-family: Roboto;
  font-family: "Helvetica Neue";
  font-family: Arial;
  font-family: "Noto Sans";
  font-family: sans-serif;
  font-family: "Apple Color Emoji";
  font-family: "Segoe UI Emoji";
  font-family: "Segoe UI Symbol";
  font-family: "Noto Color Emoji";
}

[wikipeter]

Just resolved my issue by providing a closure with string interpolation for the fontFamily reference.

I turned this:

h1: {
  fontFamily: theme('fontFamily.display'),
  color: theme('colors.turquoise.500'),
},

into this:

h1: {
  fontFamily: `${theme('fontFamily.display')}`,
  color: theme('colors.turquoise.500'),
},

which results in:

.prose h1 {
  color: #1a202c;
  font-weight: 800;
  font-size: 2.25em;
  margin-top: 0;
  margin-bottom: 0.8888889em;
  line-height: 1.1111111;
  font-family: "Open Sans Condensed",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}

[klickreflex]

Thank you guys for the quick help ❤️