-
Notifications
You must be signed in to change notification settings - Fork 255
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.
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
Referencing theme config in typography customization #14
Comments
You can already do this: module.exports = {
theme: {
typography: (theme) => ({
// ...
})
}
} |
Yep @ahaseeb04 nailed it 👍 Works just like anything else in Tailwind in this regard: |
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";
} |
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";
} |
Thank you guys for the quick help ❤️ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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:
The text was updated successfully, but these errors were encountered: