mirror of
https://github.com/aljazceru/mutiny-web.git
synced 2025-12-17 22:34:23 +01:00
109 lines
3.3 KiB
JavaScript
109 lines
3.3 KiB
JavaScript
const plugin = require('tailwindcss/plugin')
|
|
|
|
/** @type {import('tailwindcss').Config} */
|
|
module.exports = {
|
|
content: [
|
|
"./index.html",
|
|
"./src/**/*.{js,ts,jsx,tsx}",
|
|
],
|
|
safelist: [
|
|
'grid-cols-1',
|
|
'grid-cols-2',
|
|
'gap-2',
|
|
'gap-4',
|
|
'outline-m-red',
|
|
'outline-m-blue',
|
|
],
|
|
variants: {
|
|
extend: {
|
|
borderWidth: ['responsive', 'last', 'hover', 'focus'],
|
|
}
|
|
},
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
"half-black": "rgba(0, 0, 0, 0.5)",
|
|
"faint-white": "rgba(255, 255, 255, 0.1)",
|
|
"light-text": "rgba(250, 245, 234, 0.5)",
|
|
"m-green": "hsla(163, 70%, 38%, 1)",
|
|
"m-green-dark": "hsla(163, 70%, 28%, 1)",
|
|
"m-blue": "hsla(220, 59%, 52%, 1)",
|
|
"m-blue-dark": "hsla(220, 59%, 42%, 1)",
|
|
"m-red": "hsla(343, 92%, 54%, 1)",
|
|
"m-red-dark": "hsla(343, 92%, 44%, 1)",
|
|
"sidebar-gray": "hsla(222, 15%, 7%, 1)"
|
|
},
|
|
backgroundImage: {
|
|
'fade-to-blue': 'linear-gradient(1.63deg, #0B215B 32.05%, rgba(11, 33, 91, 0) 84.78%)',
|
|
'subtle-fade': 'linear-gradient(180deg, #060A13 0%, #131E39 100%)',
|
|
'richer-fade': 'linear-gradient(180deg, hsla(224, 20%, 8%, 1) 0%, hsla(224, 20%, 15%, 1) 100%)'
|
|
},
|
|
dropShadow: {
|
|
'blue-glow': '0px 0px 32px rgba(11, 33, 91, 0.5)',
|
|
},
|
|
boxShadow: {
|
|
'inner-button': '2px 2px 4px rgba(0, 0, 0, 0.1), inset 2px 2px 4px rgba(255, 255, 255, 0.1), inset -2px -2px 6px rgba(0, 0, 0, 0.2)',
|
|
'fancy-card': '0px 4px 4px rgba(0, 0, 0, 0.1)',
|
|
'above': '0px -4px 10px rgba(0, 0, 0, 0.25)',
|
|
},
|
|
textShadow: {
|
|
'button': '1px 1px 0px rgba(0, 0, 0, 0.4)'
|
|
},
|
|
},
|
|
},
|
|
plugins: [
|
|
// default prefix is "ui"
|
|
require("@kobalte/tailwindcss"),
|
|
plugin(function ({ addUtilities }) {
|
|
const newUtilities = {
|
|
".safe-top": {
|
|
paddingTop: "constant(safe-area-inset-top)",
|
|
paddingTop: "env(safe-area-inset-top)"
|
|
},
|
|
".safe-left": {
|
|
paddingLeft: "constant(safe-area-inset-left)",
|
|
paddingLeft: "env(safe-area-inset-left)"
|
|
},
|
|
".safe-right": {
|
|
paddingRight: "constant(safe-area-inset-right)",
|
|
paddingRight: "env(safe-area-inset-right)"
|
|
},
|
|
".safe-bottom": {
|
|
paddingBottom: "constant(safe-area-inset-bottom)",
|
|
paddingBottom: "env(safe-area-inset-bottom)"
|
|
},
|
|
".disable-scrollbars": {
|
|
scrollbarWidth: "none",
|
|
"-ms-overflow-style": "none",
|
|
"&::-webkit-scrollbar": {
|
|
width: "0px",
|
|
background: "transparent",
|
|
display: "none"
|
|
},
|
|
"& *::-webkit-scrollbar": {
|
|
width: "0px",
|
|
background: "transparent",
|
|
display: "none"
|
|
},
|
|
"& *": {
|
|
scrollbarWidth: "none",
|
|
"-ms-overflow-style": "none"
|
|
}
|
|
}
|
|
};
|
|
addUtilities(newUtilities);
|
|
}),
|
|
// Text shadow!
|
|
plugin(function ({ matchUtilities, theme }) {
|
|
matchUtilities(
|
|
{
|
|
'text-shadow': (value) => ({
|
|
textShadow: value,
|
|
}),
|
|
},
|
|
{ values: theme('textShadow') }
|
|
)
|
|
}),
|
|
],
|
|
}
|