How to use the @theme-ui/preset-tailwind.baseColors.blue 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 / starters / gatsby-starter-catalyst-blog / src / gatsby-theme-catalyst-core / theme.js View on Github 
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],
},
footer: {
background: baseColors.gray[8],
text: baseColors.gray[1],
links: baseColors.gray[1],
icons: baseColors.gray[1],
},
modes: {
dark: {
text: "#fff",
background: "#000",
},
},
},
sizes: {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],
},
footer: {
background: baseColors.gray[8],
text: baseColors.gray[1],
links: baseColors.gray[1],
icons: baseColors.gray[1],
},
modes: {
dark: {
text: "#fff",
background: "#000",
},
},
},
sizes: {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],
},
footer: {
background: baseColors.gray[8],
text: baseColors.gray[1],
links: baseColors.gray[1],
icons: baseColors.gray[1],
},
modes: {
dark: {
text: "#fff",
background: "#000",
},
},
},
sizes: {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],
},
footer: {
background: baseColors.gray[8],
text: baseColors.gray[1],
links: baseColors.gray[1],
icons: baseColors.gray[1],
},
modes: {
dark: {
text: "#fff",
background: "#000",
},
},
},
sizes: {@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