chore(frontend): Tailwind v4 CSS-first config
Move every tailwind.config.js option into src/style.css: @import, @plugin flowbite/plugin, @source for the flowbite-svelte dist (node_modules is gitignored so auto-detection skips the lib), @theme for the custom primary scale, and @utility container porting the old center plus responsive padding and max-width ladders. darkMode media is v4s default so it needs no equivalent. vite.config.ts gains the tailwindcss() plugin; index.html loses the dead flowbite.js tag. style.css also carries two v4-behavior restorations found while verifying the built CSS: pointer cursor on buttons (v4 preflight dropped v3s rule) and the container max-width ladder the first pass at this file omitted.
This commit is contained in:
+57
-3
@@ -1,6 +1,60 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
@import "tailwindcss";
|
||||
|
||||
@plugin 'flowbite/plugin';
|
||||
|
||||
@source "../node_modules/flowbite-svelte/dist";
|
||||
|
||||
@theme {
|
||||
--color-primary-50: #FFF5F2;
|
||||
--color-primary-100: #FFF1EE;
|
||||
--color-primary-200: #FFE4DE;
|
||||
--color-primary-300: #FFD5CC;
|
||||
--color-primary-400: #FFBCAD;
|
||||
--color-primary-500: #FE795D;
|
||||
--color-primary-600: #EF562F;
|
||||
--color-primary-700: #EB4F27;
|
||||
--color-primary-800: #CC4522;
|
||||
--color-primary-900: #A5371B;
|
||||
}
|
||||
|
||||
@utility container {
|
||||
width: 100%;
|
||||
margin-inline: auto;
|
||||
padding-inline: 1rem;
|
||||
|
||||
@media (width >= theme(--breakpoint-sm)) {
|
||||
max-width: theme(--breakpoint-sm);
|
||||
padding-inline: 2rem;
|
||||
}
|
||||
|
||||
@media (width >= theme(--breakpoint-md)) {
|
||||
max-width: theme(--breakpoint-md);
|
||||
}
|
||||
|
||||
@media (width >= theme(--breakpoint-lg)) {
|
||||
max-width: theme(--breakpoint-lg);
|
||||
padding-inline: 4rem;
|
||||
}
|
||||
|
||||
@media (width >= theme(--breakpoint-xl)) {
|
||||
max-width: theme(--breakpoint-xl);
|
||||
padding-inline: 5rem;
|
||||
}
|
||||
|
||||
@media (width >= theme(--breakpoint-2xl)) {
|
||||
max-width: theme(--breakpoint-2xl);
|
||||
padding-inline: 6rem;
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
/* Tailwind v4 removed the v3 preflight rule that gave buttons a
|
||||
pointer cursor. Restore it (disabled buttons keep the default). */
|
||||
button:not(:disabled),
|
||||
[role="button"]:not(:disabled) {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
background-color: rgba(27, 38, 54, 1);
|
||||
|
||||
Reference in New Issue
Block a user