tailwindcss fixes and rewrites

This commit is contained in:
Echo 2025-06-25 11:39:11 -04:00
parent 07a5b5b88d
commit 1adf277809
No known key found for this signature in database
3 changed files with 66 additions and 24 deletions

View file

@ -53,6 +53,7 @@ COPY . .
RUN bundle exec bootsnap precompile app/ lib/
# Precompiling assets for production without requiring secret RAILS_MASTER_KEY
RUN SECRET_KEY_BASE_DUMMY=1 ./bin/rails tailwindcss:build
RUN SECRET_KEY_BASE_DUMMY=1 ./bin/rails assets:precompile
# Final stage for app image

View file

@ -1,5 +1,60 @@
@import "tailwindcss";
:root {
--color-darker: #121217;
--color-dark: #17171D;
--color-darkless: #252429;
--color-red: #EC3750;
--color-orange: #FF8C37;
--color-yellow: #F1C40F;
--color-green: #33D6A6;
--color-cyan: #5BC0DE;
--color-blue: #338EDA;
--color-purple: #A633D6;
--color-primary: #EC3750;
--color-secondary: #8492A6;
}
/* for some reason tailwind just does not want to work, so lets make sure it does */
.bg-darker { background-color: var(--color-darker) !important; }
.bg-dark { background-color: var(--color-dark) !important; }
.bg-darkless { background-color: var(--color-darkless) !important; }
.bg-primary { background-color: var(--color-primary) !important; }
.bg-secondary { background-color: var(--color-secondary) !important; }
.bg-red { background-color: var(--color-red) !important; }
.bg-orange { background-color: var(--color-orange) !important; }
.bg-yellow { background-color: var(--color-yellow) !important; }
.bg-green { background-color: var(--color-green) !important; }
.bg-cyan { background-color: var(--color-cyan) !important; }
.bg-blue { background-color: var(--color-blue) !important; }
.bg-purple { background-color: var(--color-purple) !important; }
.text-darker { color: var(--color-darker) !important; }
.text-dark { color: var(--color-dark) !important; }
.text-darkless { color: var(--color-darkless) !important; }
.text-primary { color: var(--color-primary) !important; }
.text-secondary { color: var(--color-secondary) !important; }
.text-red { color: var(--color-red) !important; }
.text-orange { color: var(--color-orange) !important; }
.text-yellow { color: var(--color-yellow) !important; }
.text-green { color: var(--color-green) !important; }
.text-cyan { color: var(--color-cyan) !important; }
.text-blue { color: var(--color-blue) !important; }
.text-purple { color: var(--color-purple) !important; }
.border-darker { border-color: var(--color-darker) !important; }
.border-dark { border-color: var(--color-dark) !important; }
.border-darkless { border-color: var(--color-darkless) !important; }
.border-primary { border-color: var(--color-primary) !important; }
.border-secondary { border-color: var(--color-secondary) !important; }
.border-red { border-color: var(--color-red) !important; }
.border-orange { border-color: var(--color-orange) !important; }
.border-yellow { border-color: var(--color-yellow) !important; }
.border-green { border-color: var(--color-green) !important; }
.border-cyan { border-color: var(--color-cyan) !important; }
.border-blue { border-color: var(--color-blue) !important; }
.border-purple { border-color: var(--color-purple) !important; }
@layer base {
.nav-mobile-hidden {
@apply lg:block hidden;

View file

@ -7,31 +7,17 @@ module.exports = {
extend: {
colors: {
'darker': '#121217',
'dark': '#17171d',
'dark': '#17171D',
'darkless': '#252429',
'black': '#1f2d3d',
'steel': '#273444',
'slate': '#3c4858',
'muted': '#8492a6',
'smoke': '#e0e6ed',
'snow': '#f9fafc',
'white': '#ffffff',
'red': '#ec3750',
'orange': '#ff8c37',
'yellow': '#f1c40f',
'green': '#33d6a6',
'cyan': '#5bc0de',
'blue': '#338eda',
'purple': '#a633d6',
'primary': '#ec3750',
'secondary': '#8492a6',
'accent': '#5bc0de',
'text': '#ffffff',
'background': '#121217',
'elevated': '#17171d',
'sheet': '#252429',
'sunken': '#252429',
'border': '#252429'
'red': '#EC3750',
'orange': '#FF8C37',
'yellow': '#F1C40F',
'green': '#33D6A6',
'cyan': '#5BC0DE',
'blue': '#338EDA',
'purple': '#A633D6',
'primary': '#EC3750',
'secondary': '#8492A6'
}
},
},