manifold/web/tailwind.config.js
Sinclair Chen 8903b1ef95
Replace style props with tailwind classes (#800)
* add utility class for `word-break: break-word`

* refactor visuallyHidden style out of Page

* refactor out ref sizing hack in sidebar

* replace style props with tailwind classes
2022-08-26 14:23:06 -07:00

105 lines
2.8 KiB
JavaScript

const defaultTheme = require('tailwindcss/defaultTheme')
const plugin = require('tailwindcss/plugin')
module.exports = {
content: [
'./pages/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
],
theme: {
fontFamily: Object.assign(
{ ...defaultTheme.fontFamily },
{
'major-mono': ['Major Mono Display', 'monospace'],
'readex-pro': ['Readex Pro', 'sans-serif'],
}
),
extend: {
backgroundImage: {
'world-trading': "url('/world-trading-background.webp')",
},
colors: {
'greyscale-1': '#FBFBFF',
'greyscale-2': '#E7E7F4',
'greyscale-3': '#D8D8EB',
'greyscale-4': '#B1B1C7',
'greyscale-5': '#9191A7',
'greyscale-6': '#66667C',
'greyscale-7': '#111140',
},
typography: {
quoteless: {
css: {
'blockquote p:first-of-type::before': { content: 'none' },
'blockquote p:first-of-type::after': { content: 'none' },
},
},
},
},
},
plugins: [
require('@tailwindcss/forms'),
require('@tailwindcss/typography'),
require('@tailwindcss/line-clamp'),
require('daisyui'),
plugin(function ({ addUtilities }) {
addUtilities({
'.scrollbar-hide': {
/* IE and Edge */
'-ms-overflow-style': 'none',
/* Firefox */
'scrollbar-width': 'none',
/* Safari and Chrome */
'&::-webkit-scrollbar': {
display: 'none',
},
},
'.break-anywhere': {
'overflow-wrap': 'anywhere',
'word-break': 'break-word', // for Safari
},
})
}),
],
daisyui: {
themes: [
{
mantic: {
primary: '#11b981',
'primary-focus': '#069668',
// Foreground content color to use on primary color
'primary-content': '#ffffff',
secondary: '#a991f7',
'secondary-focus': '#8462f4',
// Foreground content color to use on secondary color
'secondary-content': '#ffffff',
accent: '#f6d860',
'accent-focus': '#f3cc30',
// Foreground content color to use on accent color
'accent-content': '#ffffff',
neutral: '#3d4451',
'neutral-focus': '#2a2e37',
// Foreground content color to use on neutral color
'neutral-content': '#ffffff',
'base-100': '#ffffff' /* Base page color, for blank backgrounds */,
'base-200': '#f9fafb' /* Base color, a little darker */,
'base-300': '#d1d5db' /* Base color, even more dark */,
// Foreground content color to use on base color
'base-content': '#1f2937',
info: '#2094f3',
success: '#009485',
warning: '#ff9900',
error: '#ff5724',
},
},
],
},
}