tailwindlabs / blog.tailwindcss.com Goto Github PK
View Code? Open in Web Editor NEWHome Page: https://blog.tailwindcss.com
Home Page: https://blog.tailwindcss.com
Dear team, I'm trying to figure out the whole theming and customizing concept but I'm afraid I hit a dead end. Would you please tell me what I would have to do in order to let for e.g.
I prefer to get updates via email. Do you guys plan on adding a newsletter option when you add new posts?
I noticed on https://github.com/tailwindcss/blog/blob/master/src/pages/_document.js#L39-L45 you are preloading only Inter-roman.var-latin.woff2?3.13
while you also have Inter-italic.var-latin.woff2?3.13
.
My question is why aren't you preloading the italic
one?
Also, there are 2 unused fonts in public/fonts
folder.
Hey Tailwind team!
I absolutely love the new blog!
I was wondering if you guys were going to be adding in an RSS feed, or possibly a newsletter so I don't need to manually check back every once in a while.
Keep doing great work!
Please add scss support. May be in a different branch.
Forked and deployed the blog, but it seems that the syntax highlighting is being purged on deployment. On development it seems to work just find.
Example:
https://blog-tailwindcss-com-9xe6xegb9.vercel.app/building-the-tailwind-blog
I've kept the tailwind.config.js
the same:
const defaultTheme = require('tailwindcss/defaultTheme')
const mdx = require('@mdx-js/mdx')
module.exports = {
purge: {
mode: 'all',
content: ['./src/**/*.{js,mdx}', './next.config.js'],
options: {
extractors: [
{
extensions: ['mdx'],
extractor: content => {
content = mdx.sync(content)
// Capture as liberally as possible, including things like `h-(screen-1.5)`
const broadMatches = content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || []
// Capture classes within other delimiters like .block(class="w-1/2") in Pug
const innerMatches =
content.match(/[^<>"'`\s.(){}[\]#=%]*[^<>"'`\s.(){}[\]#=%:]/g) ||
[]
return broadMatches.concat(innerMatches)
},
},
],
},
},
theme: {
extend: {
spacing: {
'9/16': '56.25%',
},
lineHeight: {
'11': '2.75rem',
'12': '3rem',
'13': '3.25rem',
'14': '3.5rem',
},
fontFamily: {
sans: ['Inter var', ...defaultTheme.fontFamily.sans],
},
colors: {
code: {
green: '#b5f4a5',
yellow: '#ffe484',
purple: '#d9a9ff',
red: '#ff8383',
blue: '#93ddfd',
white: '#fff',
},
},
typography: theme => ({
default: {
css: {
color: theme('colors.gray.700'),
h2: {
fontWeight: '700',
letterSpacing: theme('letterSpacing.tight'),
color: theme('colors.gray.900'),
},
h3: {
fontWeight: '600',
color: theme('colors.gray.900'),
},
'ol li:before': {
fontWeight: '600',
color: theme('colors.gray.500'),
},
'ul li:before': {
backgroundColor: theme('colors.gray.400'),
},
code: {
color: theme('colors.gray.900'),
},
a: {
color: theme('colors.gray.900'),
},
pre: {
color: theme('colors.gray.200'),
backgroundColor: theme('colors.gray.800'),
},
blockquote: {
color: theme('colors.gray.900'),
borderLeftColor: theme('colors.gray.200'),
},
},
},
}),
},
},
variants: {},
plugins: [
require('@tailwindcss/ui'),
require('@tailwindcss/typography'),
function({addBase, addComponents, theme}) {
addBase([
{
'@font-face': {
fontFamily: 'Inter var',
fontWeight: '100 900',
fontStyle: 'normal',
fontNamedInstance: 'Regular',
fontDisplay: 'swap',
src:
'url("/fonts/Inter-roman.var-latin.woff2?3.13") format("woff2")',
},
},
{
'@font-face': {
fontFamily: 'Inter var',
fontWeight: '100 900',
fontStyle: 'italic',
fontNamedInstance: 'Italic',
fontDisplay: 'swap',
src:
'url("/fonts/Inter-italic.var-latin.woff2?3.13") format("woff2")',
},
},
])
},
],
}
Any idea on what I'm missing here? ๐
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.