Comments (5)
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";
}
from tailwindcss-typography.
You can already do this:
module.exports = {
theme: {
typography: (theme) => ({
// ...
})
}
}
from tailwindcss-typography.
Yep @ahaseeb04 nailed it 👍 Works just like anything else in Tailwind in this regard:
https://tailwindcss.com/docs/theme#referencing-other-values
from tailwindcss-typography.
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";
}
from tailwindcss-typography.
Thank you guys for the quick help ❤️
from tailwindcss-typography.
Related Issues (20)
- Generated classes do not respect base tailwind.config "important" setting HOT 2
- `not-prose` does not reset `prose-lg` HOT 2
- Bottom margin is not reset for last child when redefined in lg prose HOT 2
- Wrong order of custom utilities and prose with variant HOT 3
- 0.5.10 causes '[class~=not-prose] *)):before' is not a valid selector HOT 5
- Peer dependency invalid version requirement HOT 1
- `prose-code` targets both inline and block code
- Bad DX: [object Object] appearing in CSS when customizing typography
- Unable to change video size using prose-video:{utility} HOT 3
- Does not work on wechat webview HOT 1
- Numbered lists are being cut off HOT 1
- Markdown Rendered Graphs Overflows the Screen HOT 1
- Type error in the config: Binding element 'theme' implicitly has an 'any' type. HOT 1
- Links don't have a default hover state HOT 3
- Prose not formatting markdown tables correctly HOT 1
- The rendered image height is incorrect. HOT 1
- headings modifier does not work HOT 5
- Prose class adds inner border to specific font on Chrome HOT 2
- Different rendering on Firefox HOT 3
- @apply prose is failing the first- and last-child selectors HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from tailwindcss-typography.