tailwindlabs / tailwindcss-typography Goto Github PK
View Code? Open in Web Editor NEWBeautiful typographic defaults for HTML you don't control.
Home Page: https://tailwindcss-typography.vercel.app/
License: MIT License
Beautiful typographic defaults for HTML you don't control.
Home Page: https://tailwindcss-typography.vercel.app/
License: MIT License
Normally I write out custom solutions similar to Typography on projects for sections of content where I don't have direct access to the markup.
I figured I'd give Typography a try, but it's currently difficult to use because the plugin adds margin to elements within the prose class. This is particularly troublesome when working with preceeding components that have a consistent margin-bottom across the site, which would need to be adjusted to account for the additional margin added by Typography, or I would need to go through everything single element and add margin overrides in the config, which defaults the object of having a customisable solution off the shelf.
Being able to disable spacing, or use an override to apply margin only to the bottom or top of elements would help massively.
The backtick character is being displayed around text marked as code
. This also happens on the demo site https://tailwindcss-typography.netlify.app/
I would like to use prose
to style a rich text editor, like draft.js, but its styles are being overridden. It would be great to be able to prefix prose with an id or multiple classes to ensure that prose
has enough css specificity to style the editor.
I am trying to remove all of the unneeded prose classes to try and reduce the size of my css file since this plugin adds a ton of extra filesize to my existing css file.
I have explicitly defined which modifiers should be included in my css and seems to work for the most part.
plugins: [
require('tailwindcss-aspect-ratio'),
require('@tailwindcss/custom-forms'),
require('@tailwindcss/typography')({
modifiers: ['xl'],
}),
],
However, I only need the xl modifier for large screens breakpoint but it seems the xl modifier is still being included for every breakpoint and aren't getting purged. And I'm also getting responsive classes generated for .32xl:prose
and I'm not even sure where this would be coming from.
Any help is appreciated.
Here is my full tailwind.config.js for reference:
// const plugin = require('tailwindcss/plugin')
const round = (num) =>
num
.toFixed(7)
.replace(/(\.[0-9]+?)0+$/, '$1')
.replace(/\.0$/, '')
const rem = (px) => `${round(px / 16)}rem`
const em = (px, base) => `${round(px / base)}em`
module.exports = {
purge: [
'./**/*.php',
'./views/**/*.twig',
],
theme: {
extend: {
aspectRatio: {
'16/9': [16, 9],
'4/3': [4, 3],
'1/1': [1,1],
},
backgroundOpacity: {
'90': '0.90',
},
boxShadow: {
'sm': '0 3px 6px rgba(0, 0, 0, 0.16)',
'default': '0 0 10px rgba(0, 0, 0, 0.5)',
},
colors: {
primary: '#044D96',
'brand-red': '#C02734',
'banner': 'rgba(4, 77, 150, 0.51)',
gray: {
50: '#FAFAFA',
// 100: '',
// 200: '',
// 300: '',
// 400: '',
// 500: '',
600: '#707070',
700: '#5F5D5D',
800: '#505050', // dark text
// 900: '',
},
},
container: theme => ({
padding: {
default: theme('padding.4'),
// md: theme('padding.4'),
},
}),
borderWidth: {
'34': '34px',
'6': '6px',
},
height: {
'6px': '6px',
},
screens: {
'2xl': '1460px',
},
spacing: {
17: '4.25rem',
25: '6.25rem',
// 26: '6.5rem',
// 27: '6.75rem',
// 28: '7rem',
// 29: '7.25rem',
// 30: '7.5rem',
// 31: '7.75rem',
// 65: '16.25rem',
// 66: '16.5rem',
// 67: '16.75rem',
// 68: '17rem',
// 69: '17.25rem',
// 70: '17.5rem',
// 71: '17.75rem',
// 72: '18rem',
// 73: '18.25rem',
// 74: '18.5rem',
// 75: '18.75rem',
// 76: '19rem',
// 77: '',
// 78: '',
// 79: '',
80: '20rem',
},
},
fontFamily: {
display: ['Roboto', 'sans-serif'],
body: ['Open Sans', 'sans-serif'],
},
typography: (theme) => ({
default: {
css: {
a: {
color: theme('colors.primary'),
textDecoration: false,
},
},
},
xl: {
css: {
lineHeight: theme('lineHeight.snug'), // snug
h1: {
fontSize: em(60, 20),
},
},
},
}),
customForms: theme => ({
default: {
'input, textarea, select': {
borderRadius: '0',
boxShadow: theme('boxShadow.sm'),
borderColor: theme('colors.gray.600'),
},
},
}),
},
variants: {
opacity: ['responsive', 'hover', 'focus', 'group-hover'],
// typography: [],
},
plugins: [
require('tailwindcss-aspect-ratio'),
require('@tailwindcss/custom-forms'),
require('@tailwindcss/typography')({
modifiers: ['xl'],
}),
],
}
https://loving-hawking-9f743b.netlify.app/blog/using-a-html-img-tag/ <- example of issue, if you remove z-10 from the nav, the list items appear on top of it
I'm using Vue and Gridsome, removing the prose classes stops the behaviour, it happens with both unordered and ordered lists
The Navigation bar has a fixed position but no z-index is being applied to it
I can't see any z-index being applied to the lists when the prose class is being used but I could have missed something
It could be something to do with the absolute positioning of list elements
Hey Adam!
I’m very interested in this plugin but I’m wondering if there’s a way to get back just Tailwind classes as opposed to the PostCSS-style styles, for example the ones found here.
Is there a reasonable common ground here, even if only for the 90% case, or is it simply incompatible with how this was architected? For my use case, I’d like to bootstrap classes generated from this plugin. For me, relying 100% on PostCSS seems uncomfortable if I need to add special behavior like dark mode or etc. I get that there are a lot of styles that don’t translate to Tailwind CSS, but I suspect that some 90% of them are perfectly compatible.
Thank you.
Toggling prose off displays correct data, but adding prose to the table class is making some misalignment in the "Dog" column, check code and screenshot below.
Owner | Dog | Breed | Dog Age |
---|---|---|---|
Alisha Langosh | Ivah | Chiwawa | 3 years old |
Ivy | Labrador | 13 years old | |
Orlo | Labrador | 5 years old | |
Berenice Gibson | Jenifer | Wolf | 13 years old |
Bradford Bernier | Bernard | Labrador | 9 years old |
Camron | Wolf | 5 years old | |
Chesley Ankunding | Caleb | Labrador | 6 years old |
Hadley | Labrador | 4 years old | |
Jovanny | Labrador | 10 years old | |
Kamren | Wolf | 13 years old | |
Magdalena | German Shepherd | 10 years old |
Hi,
I have tried to use the plugin in Angular9.
As markdown interpreter I use ngx-markdown. Tailwind works, because the whole application was developed with Tailwind only.
But the plugin does not work.
component.html:
<div class="w-11/12 px-4 mx-auto mt-4">
<article class="prose prose-sm sm:prose lg:prose-lg xl:prose-xl bg-blue-100" ngPreserveWhitespaces markdown
[src]="'assets/project/demo.md'" (load)="onLoad($event)" (error)="onError($event)">
</article>
</div>
tailwind.config.ts
typography: (theme) => ({
default: {
css: {
color: '#ffffff',
// ...
}
}
}),
variants: {},
plugins: [
require('@tailwindcss/typography')
],
I have tried the different ViewEncapsulation. Nothing worked.
The first idea I had was to add ::ng-deep
to every class. Is there a way to do that?
Or do you have a better idea?
I followed the instructions from @tailwindcss/typography
yarn add @tailwindcss/typography
added the plugin to tailwind.config.js as mentioned.
Shouldn't the following command generate a final CSS that contains the typography classes?
npx tailwindcss build src/styles/index.scss -o output.css
Adding the following line to the source file index.scss
after @tailwindcss base;
is not mentioned in the document.
@tailwindcss typography;
But even that makes no difference. This line is not replaced at all and is retained as is. Building the app using yarn dev
and yarn build
also does not include the typography styles in the app. This just the default app with only the addition of tailwindcss
.
Can you tell me what I am doing wrong or what step I have missed?
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'),
},
},
},
Hoping for drop cap support.
If I add this to the config:
module.exports = {
theme: {
typography: (theme) => ({
default: {
css: [
'h2:before': {
display: 'block',
content: '',
width: theme('width.24'),
marginBottom: theme('margin.2'),
borderTopWidth: theme('borderWidth.2'),
borderTopColor: theme('colors.blue.400'),
},
},
],
},
...
}
The empty content
property gets removed and results in the invalid CSS:
h2::before {
display: block;
content: ; /* invalid!! */
width: 6rem;
margin-bottom: 0.5rem;
border-top-width: 2px;
border-top-color: #63b3ed;
}
Any ideas on how to add an empty content
property to the :before
pseudo class?
Hi.
I know this is not ready for use but it doesn't appear to be a valid Tailwind plugin as it is... — I had to import it and then use it like so:
// tailwind.config.js
typography = require(...)
module.exports = {
theme: {
extend: typography.config.theme
},
variants: {},
plugins: [
typography.handler
]
}
I couldn't for the life of me see how that was magic'd together from the current state of the repo, but, I guess, a couple of paragraphs in the README showing how to wire it up might save a few folks a cycle.
Anyhow, it's a great example, thanks!
First of all, thank you for the plugin! I think it will generate a lot of value for me in the future.
I would love to see a text color palette that can be altered for all the prose instances in one place of the config.
Right now we have:
default: {
css: [
{
color: defaultTheme.colors.gray[700],
maxWidth: '65ch',
'[class~="lead"]': {
color: defaultTheme.colors.gray[700],
},...
Instead I propose something like
colors: {
prose-theme-x: {
100: "#fffaf0",
200: "#feebc8",
300: "#1a202c",
400: "#f6ad55",
500: "#ed8936",
600: "#dd6b20",
700: "#c05621",
800: "#9c4221",
900: "#7b341e",
},
default: {
css: [
{
color: colors.prose-theme-x[700],
maxWidth: '65ch',
'[class~="lead"]': {
color: colors.prose-theme-x[700],
},...
Sure it's easy to just replace all instances of default.Theme.colors.grey but then I need to add a whole lot of options to the config file. If I could just edit the color palette in the config instead it would be cleaner and easier in my opinion.
Let me know what you think, looking forward!
(First reported at tailwindlabs/tailwindcss.com#492.)
I'm not sure how to override the default values and remove (a.k.a. “undefine” or “unset”) them. This is probably just a matter of clarifying the documentation.
I started with the following tailwind.config.js
:
module.exports = {
theme: {
typography: {
default: {
css: {
a: {
background: /* ... */,
textShadow: /* ... */,
},
},
},
},
},
plugins: [
require('@tailwindcss/typography'),
],
}
I thought the a
object would completely replace the .prose a
style. But I discovered that .prose a
still had text-decoration: underline
, which I did not want. I tried adding textDecoration: undefined
to the a
in the tailwind.config.js
above, but that didn't change anything. Then, I added textDecoration: null
, and that seems to have removed the text-decoration
. (textDecoration: false
also seems to work.)
This leads to some questions:
default
overrides in the tailwind.config.js
?Maybe you just want to expand on this text in the README.md
with a bit more detail and an example:
It's important to note that all customizations are merged with the defaults. If you'd like to completely override a provided size modifier, you can do so by disabling that modifier so the default styles are not included.
Thanks!
Firstly, this tailwind plugin is awesome! Well done!
I'm using a "dark mode" tailwindcss plugin (https://github.com/ChanceArthur/tailwindcss-dark-mode), and it would be great to support something like this using this typography plugin. From the documentation, I can see that it's simple enough to modify the styles in the tailwind.config.js
file - but can we use this in conjunction with a dark mode parent class to provide both light and dark styles?
Thanks!
This might just be user error. I cannot get utility classes to take precedence over prose. for example:
<div class="prose">
<h1 class="mb-0">Hello World</h1>
</div>
In this circumstance, the prose default margin is still used on the H1 tag. CSS and tailwind.config.js:
css
@tailwind base;
/* custom stuff */
@tailwind components;
/* custom stuff */
@tailwind utilities;
tailwind.config.js
module.exports = {
...
plugins: [
require('@tailwindcss/typography'),
require('tailwindcss'),
require('autoprefixer')
],
};
Is there something specific I need to do to load the plugins and utilities in a different order?
In a section of text, from Markdown (.Content
in Hugo), I have a shortcode that is rendering a button. Prose is overriding the styling of the font styling and is underlining the text in the button. I can't seem to override this with TW classes on that element. If I disable prose on the higher-level container, then it works as expected, but then I lose all the nice styling for the rest of the content.
I am suggesting a 'no-prose' class that can disable the application of prose styles to that element and all children of it.
I've changed the default code style to the common approach of making it an inline-block
and adding space around it. But inside lists I get this result:
This is the code to reproduce.
typography: {
default: {
css: {
'h1 > a, h2 > a, h3 > a, h4 > a': {
textDecoration: 'none',
},
code: {
backgroundColor: defaultTheme.colors.gray[200],
borderRadius: defaultTheme.borderRadius.default,
paddingLeft: defaultTheme.spacing[1],
paddingRight: defaultTheme.spacing[1],
display: 'inline-block',
lineHeight: defaultTheme.lineHeight['snug'],
},
'code::before': {
content: 'none',
},
'code::after': {
content: 'none',
},
'pre code::before': {
content: 'none',
},
'pre code::after': {
content: 'none',
},
},
},
}
*Note that the last two rules are related to a bug in Firefox, fixed in #41
I think this is the cause https://github.com/tailwindlabs/tailwindcss-typography/blob/master/src/styles.js#L259
'> ul > li > *:first-child': {
marginTop: em(20, 16),
},
'> ul > li > *:last-child': {
marginBottom: em(20, 16),
},
'> ol > li > *:first-child': {
marginTop: em(20, 16),
},
'> ol > li > *:last-child': {
marginBottom: em(20, 16),
},
Could not find a declaration file for module '@tailwindcss/typography'. 'c:/Users/fari/Documents/GitHub/easybank-tailwind->template/node_modules/@tailwindcss/typography/src/index.js' implicitly has an 'any' type.
Trynpm install @types/tailwindcss__typography
if it exists or add a new declaration (.d.ts) file containingdeclare module >'@tailwindcss/typography';
ts(7016)
The suggested fix works, is there a reason why the .d.ts file isn't included in the root of the typography folder by default?
Do I need to setup the config for each heading element one by one or is there a way to do them all together if the styles repeat?
h1: {
color: '#e0e0ff',
},
h2: {
color: '#e0e0ff',
}
Hello.
I use 11ty with TailwindCSS and I faced a problem. Look, I set class prose
on the article in my post.njk
template:
{% block content %}
<article class="prose">
<h1>{{ title }}</h1>
{{ content | safe }}
</article>
...
{% endblock %}
Content in markdown files may contain tier 1-4 headings. After build, the resulting css includes .prose h1
and .prose h3
but doesn't contain .prose h2
and .prose h4
. Although this page has only level 2 headings.
I tried to add 'prose'
to whitelist but it didn't work:
purge: {
enabled: process.env.ELEVENTY_ENV === 'production',
content: [
'./src/**/*.njk',
'./src/**/*.md',
'./src/**/*.js',
'./src/**/*.svg',
],
options: {
whitelist: ['mode-dark', 'prose'],
},
},
plugins: [
require('@tailwindcss/typography'),
In development mode everything works.
Do anybody knows where might be a problem?
I have custom gray values for Tailwind, but the Typography plugin still uses the default gray values. Is this expected behaviour?
Looking at the computed CSS colors they appear to all be the standard Tailwind gray colors (gray-100, gray-700, and gray-900, etc.). I know that these standard colors are hand picked, but it would be awesome if the Typography plugin would automatically use the custom colors so the prose sections are more aligned with the style of the site. I am super new to Tailwind, so I don't know this technically is possible.
I'm trying to add Prism to highlight code (using the same package as you guys are using for the blog, @mapbox/rehype-prism
with Next).
The problem I'm facing is that the classes added by the highlight styles are overwritten by pre
and code
styles inside prose.
Also, overwriting typography styles in tailwind.config
only work to certain extent, as code styles leak to other selectors: if I overwrite pre code
styles so code boxes have one style, while small snippets using just code
have another, the styles from the later would be inherited.
Edit: as configs are always merged, there isn't a way to completely overwrite a rule without specific styles, as it will be added back again.
I was thinking about "prose core plugins": it's the same concept as Tailwind CSS, but would be applied to certain components like: headings, table, code, lists and text(?)
This way you could easily remove certain styles and provide your own.
/* PrismJS 1.20.0
https://prismjs.com/download.html#themes=prism-funky&languages=markup+css+clike+javascript+bash+markdown+jsx+yaml */
/**
* prism.js Funky theme
* Based on “Polyfilling the gaps” talk slides http://lea.verou.me/polyfilling-the-gaps/
* @author Lea Verou
*/
code[class*='language-'],
pre[class*='language-'] {
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
font-size: 1em;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 2;
-o-tab-size: 2;
tab-size: 2;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
/* Code blocks /
pre[class='language-'] {
padding: 0.4em 0.8em;
margin: 0.5em 0;
overflow: auto;
background: black;
background-size: 1em 1em;
}
code[class*='language-'] {
background: black;
color: white;
box-shadow: -0.3em 0 0 0.3em black, 0.3em 0 0 0.3em black;
}
/* Inline code /
:not(pre) > code[class='language-'] {
padding: 0.2em;
border-radius: 0.3em;
box-shadow: none;
white-space: normal;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: #aaa;
}
.token.punctuation {
color: #999;
}
.token.namespace {
opacity: 0.7;
}
.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol {
color: #0cf;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin {
color: yellow;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.token.variable,
.token.inserted {
color: yellowgreen;
}
.token.atrule,
.token.attr-value,
.token.keyword {
color: deeppink;
}
.token.regex,
.token.important {
color: orange;
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}
.token.deleted {
color: red;
}
/* Plugin styles: Diff Highlight */
pre.diff-highlight.diff-highlight > code .token.deleted:not(.prefix),
pre > code.diff-highlight.diff-highlight .token.deleted:not(.prefix) {
background-color: rgba(255, 0, 0, 0.3);
display: inline;
}
pre.diff-highlight.diff-highlight > code .token.inserted:not(.prefix),
pre > code.diff-highlight.diff-highlight .token.inserted:not(.prefix) {
background-color: rgba(0, 255, 128, 0.3);
display: inline;
}
Hello hello,
I really like the approach of this plugin and would like to use it.
But when I tried it out, I ran into problems with custom colours and overriding attributes.
Overriding colours in HTML is not possible. I think that is by design ?
Overriding the defaults does not help unfortunately.
From my experience, especially header (<h1>
) do often have a custom Colors depending on the current topic.
E.g. Lettuce (green), Tomato (red), Orange (orange) should have their heading in the corresponding color.
In general it is not possible to override specific attributes in HTML, for instance margins or as said colours.
Probably because the plugin is loaded last?
Sorry I hope I don't miss something obvious here, that would make this possible using tailwind...
But I couldn't find something in the docs beside overriding defaults etc. in tailwind config.
Thank you!
To guarantee equality with existing padding/margin options I copied the rem
and em
functions into the tailwind.config.js
file. These helper functions could be exported which would help in future proofing a few minor customizations i.e.
const typography = require('@tailwindcss/typography')
'thead th': {
paddingTop: typography.em(8, 14),
paddingRight: typography.em(12, 14),
paddingLeft: typography.em(12, 14),
}
Alternatively is it possible the rem
and em
functions could be referenced in the theme
scope?
When using something like MDX you might want to add custom components in your markdown, however their style is influenced by the prose styling and it is not easy to remove this.
A possible solution to this is to use the :not
pseudo-class as demonstrated in this stackoverflow post
There is a possibility that some markdown processors will add classes to elements, so it might be best to have this as an option you can enable
I understand that the recommended use is installation using npm. My specific use is in developing the Python framework JustPy that uses tailwind and for which installation from npm is not possible.
Any suggestion would be appreciated.
Hello, i go to the point:
Sometimes for SEO people needs to have headers with different tags <h1>..<h6>
while keeping the styles. For this reason some frontend libraries style headers classes as the headers tags:
h1, .h1 {}
h2, .h2 {}
h3, .h3 {}
h4, .h4 {}
The classes have more specificity thank tags, so you can have headers with the style you want while changing the header tag for SEO: <h1 class="h2"></h1>
Think about it if it can be implemented in this plugin to style headers with utilities, so with classnames and @apply.
Thanks
Edit: specified better
Hello! 👋 I’m seeking to understand how I can disable .prose
-generated classes when consuming the @tailwindcss/ui plugin? I suspect I can purge these classes, but that seems a little bit like overkill.
My config looks like this:
module.exports = {
purge: [
"./public/**/*.html",
"./src/**/*.js",
],
theme: {
extend: {},
},
variants: {},
plugins: [
require("@tailwindcss/ui"),
],
}
But I noticed I’m getting .prose
classes in my generated file, my guess is because this plugin is bundled with Tailwind UI, which makes sense. But because if I don’t need the prose classes, I tried disabling it like this:
module.exports = {
purge: [
"./public/**/*.html",
"./src/**/*.js",
],
theme: {
extend: {},
},
variants: {
typography: [],
},
plugins: [
require("@tailwindcss/ui"),
],
}
This seems to help a little but that still generates the classes from what I can tell.
Is there a way to prevent these classes from being generated in the first place if I’m using @tailwindcss/ui? This would be greatly appreciated!
The default style of inline code has backquotes which I do not want. I tried to override it with the following configuration but it does not work.
// tailwind.config.js
module.exports = {
theme: {
typography: {
default: {
css: {
code: {
'&::before': {
content: '""',
},
'&::after': {
content: '""',
},
}
// ...
},
},
},
},
plugins: [
require('@tailwindcss/typography'),
// ...
],
}
Often-times site designs utilize a different font-family for the headings than in the body. Is there a way to customize this? I checked the default settings as per the readme, but didn't see any indication of being able to do that in the default styles. Thanks!
round(20)
→ 2
Could see this biting someone in future…
Hi Adam, this looks absolutely amazing! Normally I wouldn't even ask about CDN availability, if it weren't for a site I manage that runs on a CMS that I don't control.
Any chance this cold be released on a CDN and included in the header like TailwindCSS?
If not, I could probably make a build, upload it to GitHub, and link to that in my header.
Thanks for all that you do!
~Mike
Thanks, TWCSS team! 🚀 👏 ✅ This looks really great, and the demo (especially when viewing the raw MDX file) is quite helpful. One thing the demo doesn't include is handling of Markdown/MDX footnotes. I briefly tried the plugin and saw that footnotes were generated with two sets of ol
-style numbers... (e.g., and showing in a code block so GHMD won't render each second number as "i" or "ii")
1. 1. This is footnote 1.
2. 2. This is footnote 2.
...regardless of how I tried to mitigate this in my basic CSS all the way up to trying to kill all numbering. Suggestions? Fix in TWCSS 1.5.1? 😃
A list (ul
or ol
) followed by a heading (h2
, h3
, or h4
) has the wrong margin due to .rich-text ul + *
overriding .rich-text * + h2
(or + h3
or + h4
).
Moving the whole
'ol + *': {
marginTop: defaultTheme.spacing[4],
},
and
'ul + *': {
marginTop: defaultTheme.spacing[4],
},
blocks to the top should fix it.
I tried compiling the typography plugin, but I'm having an issue where it's wrapping all the styles with @Variants
@variants responsive {
.prose {
color: #4a5568;
max-width: 65ch;
}
tailwind.cofing.js below:
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
purge: {
enabled: false,
content: [
'./content/**/*.txt',
'./site/snippets/**/*.php',
'./site/templates/**/*.php'
]
},
theme: {
extend: {
fontFamily: {
sans: ['Inter var', ...defaultTheme.fontFamily.sans],
},
},
},
plugins: [
require('@tailwindcss/typography'),
require('@tailwindcss/ui'),
]
}
In my tailwind.config.js
I am trying to override the colours using the extend
property;
extend: {
typography: {
h1: {
color: '#fff'
},
...
},
}
The colour is applied, but not the weight, size of line-height. The defaults are lost.
How can I override specific values?
For images that don't take up the whole width, it might be good to centre images for better appearance
I implemented this in my CSS with
.prose p img {
@apply mx-auto;
@apply block;
}
but might be worth merging into the plugin
Hey!
When I've been using this in one of my projects I had to install lodash as a separate dependency, as without it my app wasn't even starting. Now that I have it installed, I'm getting this warning from node:
(node:1863470) [MODULE_NOT_FOUND] Error: @tailwindcss/typography tried to access lodash, but it isn't declared in its dependencies; this makes the require call ambiguous and unsound.
(Use `node --trace-warnings ...` to show where the warning was created)
Is there a reason for this? Or am I missing something?
This plugin seems great for websites with markdown content! Is there anything I can do to help push it forward?
I have my tailwind.config.js
set up like this;
const typography = require("@tailwindcss/typography");
module.exports = {
theme: {
fontFamily: {
body: ["'Brandon Grotesque'", "sans-serif"],
},
typography: (theme) => ({
default: {
css: {
color: theme("colors.black"),
fontSize: "1rem",
fontFamily: theme("fontFamily.body"),
},
},
}),
},
plugins: [typography],
};
But when output, .prose
looks like this;
font-family: "Brandon Grotesque"; /* this gets overwritten */
font-family: sans-serif; /* by this */
What I'd expect would be this;
font-family: "Brandon Grotesque", sans-serif;
Would you accept a PR that allows the user to define a custom base class name? Some might be restricted to certain ones based of CMSs such as .wysiwyg
or .cms-content
etc
e.g. something like..
// tailwind.config.js
module.exports = {
theme: {
typography: {
className: 'custom-class'
}
},
plugins: [
require('@tailwindcss/typography'),
// ...
],
}
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.