How to use the @theme-ui/preset-tailwind.tailwind.fonts function in @theme-ui/preset-tailwind
To help you get started, we’ve selected a few @theme-ui/preset-tailwind examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
ehowey / gatsby-theme-catalyst / themes / gatsby-theme-catalyst-core / src / theme.js View on Github 
// See https://theme-ui.com/ for more info and also https://www.gatsbyjs.org/docs/theme-ui/
// Try changing some of the colors below to see what happens.
import { tailwind, baseColors } from "@theme-ui/preset-tailwind"
export default {
useColorSchemeMediaQuery: true,
...tailwind,
breakpoints: ["480px", "768px", "1024px", "1440px"],
fonts: {
...tailwind.fonts,
siteTitle: "inherit", // Font for main site title
navLinks: "inherit", // Font for the nav menu links
alt: "inherit", //An alternate font style if needed.
},
colors: {
...tailwind.colors,
textWhite: baseColors.gray[1],
header: {
background: baseColors.gray[4],
backgroundOpen: baseColors.gray[8],
text: baseColors.gray[8],
textOpen: baseColors.gray[1],
icons: baseColors.gray[8],
iconsHover: baseColors.blue[7],
iconsOpen: baseColors.gray[1],
},// See https://theme-ui.com/ for more info and also https://www.gatsbyjs.org/docs/theme-ui/
// Try changing some of the colors below to see what happens.
import { tailwind, baseColors } from "@theme-ui/preset-tailwind"
import github from "@theme-ui/prism/presets/github"
export default {
useColorSchemeMediaQuery: true,
...tailwind,
breakpoints: ["480px", "768px", "1024px", "1440px"],
fonts: {
...tailwind.fonts,
siteTitle: "inherit", // Font for main site title
navLinks: "inherit", // Font for the nav menu links
alt: "inherit", //An alternate font style if needed.
},
colors: {
...tailwind.colors,
textWhite: baseColors.gray[1],
header: {
background: baseColors.gray[4],
backgroundOpen: baseColors.gray[8],
text: baseColors.gray[8],
textOpen: baseColors.gray[1],
icons: baseColors.gray[8],
iconsHover: baseColors.blue[7],
iconsOpen: baseColors.gray[1],
},// See https://theme-ui.com/ for more info and also https://www.gatsbyjs.org/docs/theme-ui/
// Try changing some of the colors below to see what happens.
import { tailwind, baseColors } from "@theme-ui/preset-tailwind"
export default {
...tailwind,
breakpoints: ["480px", "768px", "1024px", "1440px"],
fonts: {
...tailwind.fonts,
siteTitle: "inherit", // Font for main site title
navLinks: "inherit", // Font for the nav menu links
alt: "inherit", //An alternate font style if needed.
},
colors: {
...tailwind.colors,
primary: baseColors.red[8],
secondary: baseColors.red[5],
accent: baseColors.gray[2],
textWhite: baseColors.gray[1],
header: {
background: "transparent",
backgroundOpen: baseColors.red[1],
text: baseColors.gray[8],
textOpen: baseColors.gray[8],
icons: baseColors.gray[8],// See https://theme-ui.com/ for more info and also https://www.gatsbyjs.org/docs/theme-ui/
// Try changing some of the colors below to see what happens.
import { tailwind, baseColors } from "@theme-ui/preset-tailwind"
import github from "@theme-ui/prism/presets/github"
export default {
useColorSchemeMediaQuery: true,
...tailwind,
breakpoints: ["480px", "768px", "1024px", "1440px"],
fonts: {
...tailwind.fonts,
siteTitle: "inherit", // Font for main site title
navLinks: "inherit", // Font for the nav menu links
alt: "inherit", //An alternate font style if needed.
},
colors: {
...tailwind.colors,
textWhite: baseColors.gray[1],
header: {
background: baseColors.gray[4],
backgroundOpen: baseColors.gray[8],
text: baseColors.gray[8],
textOpen: baseColors.gray[1],
icons: baseColors.gray[8],
iconsHover: baseColors.blue[7],
iconsOpen: baseColors.gray[1],
},// See https://theme-ui.com/ for more info and also https://www.gatsbyjs.org/docs/theme-ui/
// Try changing some of the colors below to see what happens.
import { tailwind, baseColors } from "@theme-ui/preset-tailwind"
export default {
useColorSchemeMediaQuery: true,
...tailwind,
breakpoints: ["480px", "768px", "1024px", "1440px"],
fonts: {
...tailwind.fonts,
siteTitle: "inherit", // Font for main site title
navLinks: "inherit", // Font for the nav menu links
alt: "inherit", //An alternate font style if needed.
},
colors: {
...tailwind.colors,
textWhite: baseColors.gray[1],
header: {
background: baseColors.gray[4],
backgroundOpen: baseColors.gray[8],
text: baseColors.gray[8],
textOpen: baseColors.gray[1],
icons: baseColors.gray[8],
iconsHover: baseColors.blue[7],
iconsOpen: baseColors.gray[1],
},@theme-ui/preset-tailwind
Theme UI includes `@theme-ui/preset-tailwind` which can be used as an example or starting point for extending your own themes.
Package Health Score
93 / 100Popular @theme-ui/preset-tailwind functions
- @theme-ui/preset-tailwind.baseColors.blue
- @theme-ui/preset-tailwind.baseColors.gray
- @theme-ui/preset-tailwind.baseColors.pink
- @theme-ui/preset-tailwind.baseColors.red
- @theme-ui/preset-tailwind.tailwind.colors
- @theme-ui/preset-tailwind.tailwind.fonts
- @theme-ui/preset-tailwind.tailwind.sizes
- @theme-ui/preset-tailwind.tailwind.styles