jbourdon/social-media
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore(frontend): migrate Tailwind to Vite plugin

Browse Source
This commit is contained in:
Jonathan Bourdon
2026-05-07 12:14:09 -04:00
parent ef323c291f
commit 2d22fd6e04
54 changed files with 3418 additions and 3184 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/App.vue
View File

@@ -62,6 +62,7 @@
</script>
<style scoped>
@reference "@/assets/main.css";
.shell-container {
@apply min-h-screen flex flex-row;
@apply w-full font-sans;

36
frontend/src/assets/main.css
View File

@@ -1,6 +1,20 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));
@theme inline {
--color-hBackground: var(--h-background);
--color-hOnBackground: var(--h-on-background);
--color-hSurface: var(--h-surface);
--color-hOnSurface: var(--h-on-surface);
--color-hPrimary: var(--h-primary);
--color-hOnPrimary: var(--h-on-primary);
--color-hSecondary: var(--h-secondary);
--color-hOnSecondary: var(--h-on-secondary);
--color-hTertiary: var(--h-tertiary);
--color-hOnTertiary: var(--h-on-tertiary);
--color-hError: var(--h-error);
--color-hOnError: var(--h-on-error);
}
:root {
--socialize-primary: #172033;
@@ -129,13 +143,25 @@ div.card {
}
button.primary {
@apply btn;
@apply min-w-24 w-full;
@apply p-4;
@apply flex flex-nowrap gap-4 items-center justify-center;
@apply rounded-lg;
@apply capitalize text-base font-sans font-medium;
@apply px-10;
@apply cursor-pointer;
@apply bg-hPrimary text-hOnPrimary;
@apply hover:brightness-125;
}
button.secondary {
@apply btn;
@apply min-w-24 w-full;
@apply p-4;
@apply flex flex-nowrap gap-4 items-center justify-center;
@apply rounded-lg;
@apply capitalize text-base font-sans font-medium;
@apply px-10;
@apply cursor-pointer;
@apply bg-hSecondary text-hOnSecondary;
@apply hover:brightness-125;
}

1
frontend/src/components/AppAvatar.vue
View File

@@ -55,6 +55,7 @@
</template>
<style scoped>
@reference "@/assets/main.css";
.avatar {
@apply inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full font-black uppercase;
background: linear-gradient(135deg, rgba(15, 118, 110, 0.16) 0%, rgba(255, 138, 61, 0.18) 100%);

1
frontend/src/components/ImageCropperDialog.vue
View File

@@ -278,6 +278,7 @@
</template>
<style scoped>
@reference "@/assets/main.css";
.cropper-card {
@apply flex flex-col gap-5 rounded-[1.75rem] border p-5;
background: rgba(255, 255, 255, 0.98);

1
frontend/src/components/branding/BrandLogo.vue
View File

@@ -20,6 +20,7 @@
</script>
<style scoped>
@reference "@/assets/main.css";
.brand-logo-root {
@apply inline-flex items-center;
}

1
frontend/src/components/branding/BrandMark.vue
View File

@@ -16,6 +16,7 @@
</script>
<style scoped>
@reference "@/assets/main.css";
.brand-mark-root {
@apply inline-flex items-center justify-center overflow-hidden;
}

1
frontend/src/features/auth/views/ForgotPasswordView.vue
View File

@@ -129,6 +129,7 @@
</script>
<style scoped>
@reference "@/assets/main.css";
.card-content {
@apply p-6;
}

1
frontend/src/features/auth/views/LoginView.vue
View File

@@ -206,6 +206,7 @@
</script>
<style scoped>
@reference "@/assets/main.css";
.login-page {
@apply flex min-h-screen w-full items-stretch justify-center sm:items-center sm:p-4;
}

1
frontend/src/features/auth/views/RegisterView.vue
View File

@@ -186,6 +186,7 @@
</script>
<style scoped>
@reference "@/assets/main.css";
.visibility-toggle {
@apply cursor-pointer;
@apply transition-opacity duration-300;

1
frontend/src/features/auth/views/ResetPasswordView.vue
View File

@@ -195,6 +195,7 @@
</script>
<style scoped>
@reference "@/assets/main.css";
form {
@apply bg-hSurface rounded-xl p-4;
}

1
frontend/src/features/campaigns/views/CampaignDetailView.vue
View File

@@ -128,6 +128,7 @@
</template>
<style scoped>
@reference "@/assets/main.css";
.page-shell {
@apply mx-auto flex w-full max-w-7xl flex-col gap-6 px-5 py-8 md:px-8;
}

1
frontend/src/features/campaigns/views/CampaignsView.vue
View File

@@ -239,6 +239,7 @@
</template>
<style scoped>
@reference "@/assets/main.css";
.page-shell {
@apply mx-auto flex w-full max-w-7xl flex-col gap-6 px-5 py-8 md:px-8;
}

1
frontend/src/features/channels/views/ChannelsView.vue
View File

@@ -255,6 +255,7 @@
</template>
<style scoped>
@reference "@/assets/main.css";
.page-shell {
@apply mx-auto flex w-full max-w-7xl flex-col gap-6 px-5 py-8 md:px-8;
}

1
frontend/src/features/clients/views/ClientDetailView.vue
View File

@@ -483,6 +483,7 @@
</template>
<style scoped>
@reference "@/assets/main.css";
.page-shell {
@apply mx-auto flex w-full max-w-7xl flex-col gap-6 px-5 py-8 md:px-8;
}

1
frontend/src/features/clients/views/ClientsView.vue
View File

@@ -219,6 +219,7 @@
</template>
<style scoped>
@reference "@/assets/main.css";
.page-shell {
@apply mx-auto flex w-full max-w-7xl flex-col gap-6 px-5 py-8 md:px-8;
}

1
frontend/src/features/content/components/ContentApprovalPanel.vue
View File

@@ -333,6 +333,7 @@
</template>
<style scoped>
@reference "@/assets/main.css";
.approval-panel {
@apply relative flex w-11 justify-center self-start;
}

1
frontend/src/features/content/components/ContentCommentComposer.vue
View File

@@ -244,6 +244,7 @@
</template>
<style scoped>
@reference "@/assets/main.css";
.comment-composer {
@apply flex flex-col gap-3 rounded-[1.25rem] border p-4;
background: #fffdf8;

1
frontend/src/features/content/components/ContentCommentFeed.vue
View File

@@ -212,6 +212,7 @@
</template>
<style scoped>
@reference "@/assets/main.css";
.timeline-list {
@apply flex flex-col gap-4;
}

1
frontend/src/features/content/views/ContentItemDetailView.vue
View File

@@ -1357,6 +1357,7 @@
</template>
<style scoped>
@reference "@/assets/main.css";
.editor-shell {
@apply mx-auto flex w-full max-w-[110rem] flex-col gap-5 px-5 py-8 md:px-8;
}

1
frontend/src/features/content/views/ContentItemsView.vue
View File

@@ -1419,6 +1419,7 @@
</template>
<style scoped>
@reference "@/assets/main.css";
.page-shell {
@apply flex w-full flex-col gap-4 px-4 py-5 md:px-6;
}

1
frontend/src/features/content/views/MediaLibraryView.vue
View File

@@ -95,6 +95,7 @@
</template>
<style scoped>
@reference "@/assets/main.css";
.page-shell {
@apply mx-auto flex w-full max-w-7xl flex-col gap-6 px-5 py-8 md:px-8;
}

1
frontend/src/features/feedback/components/FeedbackFloatingButton.vue
View File

@@ -29,6 +29,7 @@
</template>
<style scoped>
@reference "@/assets/main.css";
.feedback-entry {
@apply fixed bottom-5 right-5 z-50;
}

1
frontend/src/features/feedback/components/FeedbackSubmissionDialog.vue
View File

@@ -620,6 +620,7 @@
</template>
<style scoped>
@reference "@/assets/main.css";
.feedback-dialog {
@apply overflow-hidden rounded-lg border;
background: #fffaf2;

1
frontend/src/features/feedback/views/DeveloperFeedbackDetailView.vue
View File

@@ -446,6 +446,7 @@
</template>
<style scoped>
@reference "@/assets/main.css";
.feedback-detail-page {
@apply mx-auto flex w-full max-w-7xl flex-col gap-5 px-5 py-8 md:px-8;
}

1
frontend/src/features/feedback/views/DeveloperFeedbackListView.vue
View File

@@ -266,6 +266,7 @@
</template>
<style scoped>
@reference "@/assets/main.css";
.feedback-review-page {
@apply mx-auto flex w-full max-w-7xl flex-col gap-5 px-5 py-8 md:px-8;
}

1
frontend/src/features/feedback/views/MyFeedbackDetailView.vue
View File

@@ -246,6 +246,7 @@
</template>
<style scoped>
@reference "@/assets/main.css";
.feedback-detail-page {
@apply mx-auto flex w-full max-w-7xl flex-col gap-5 px-5 py-8 md:px-8;
}

1
frontend/src/features/feedback/views/MyFeedbackListView.vue
View File

@@ -173,6 +173,7 @@
</template>
<style scoped>
@reference "@/assets/main.css";
.my-feedback-page {
@apply mx-auto flex w-full max-w-6xl flex-col gap-5 px-5 py-8 md:px-8;
}

1
frontend/src/features/organizations/views/OrganizationSettingsView.vue
View File

@@ -452,6 +452,7 @@
</template>
<style scoped>
@reference "@/assets/main.css";
.organization-settings-shell {
@apply mx-auto flex w-full max-w-6xl flex-col gap-6 px-5 py-8 md:px-8;
}

1
frontend/src/features/reviews/views/ReviewQueueView.vue
View File

@@ -43,6 +43,7 @@
</template>
<style scoped>
@reference "@/assets/main.css";
.page-shell {
@apply mx-auto flex w-full max-w-7xl flex-col gap-6 px-5 py-8 md:px-8;
}

1
frontend/src/features/settings/views/IntegrationsSettingsView.vue
View File

@@ -41,6 +41,7 @@
</template>
<style scoped>
@reference "@/assets/main.css";
.page-shell {
@apply flex flex-col gap-6;
}

1
frontend/src/features/settings/views/SettingsLayoutView.vue
View File

@@ -43,6 +43,7 @@
</template>
<style scoped>
@reference "@/assets/main.css";
.settings-shell {
@apply mx-auto grid w-full max-w-7xl gap-4 px-5 py-8 md:px-8 xl:grid-cols-[16rem_minmax(0,1fr)];
}

1
frontend/src/features/user-profile/views/UserSettingsView.vue
View File

@@ -346,6 +346,7 @@
</template>
<style scoped>
@reference "@/assets/main.css";
.page-shell {
@apply flex flex-col gap-6;
}

1
frontend/src/features/workspaces/components/ApprovalWorkflowEditor.vue
View File

@@ -318,6 +318,7 @@
</template>
<style scoped>
@reference "@/assets/main.css";
.approval-workflow-editor {
@apply flex flex-col gap-3;
}

1
frontend/src/features/workspaces/components/TimeZoneSelect.vue
View File

@@ -39,6 +39,7 @@
</template>
<style scoped>
@reference "@/assets/main.css";
.time-zone-select {
@apply rounded-[1rem] border px-4 py-3 text-sm;
background: #fffdf8;

1
frontend/src/features/workspaces/views/DashboardView.vue
View File

@@ -388,6 +388,7 @@
</template>
<style scoped>
@reference "@/assets/main.css";
.calendar-shell {
@apply mx-auto w-full max-w-7xl px-5 py-8 md:px-8;
}

1
frontend/src/features/workspaces/views/OverviewView.vue
View File

@@ -317,6 +317,7 @@
</template>
<style scoped>
@reference "@/assets/main.css";
.page-shell {
@apply mx-auto flex w-full max-w-7xl flex-col gap-6 px-5 py-8 md:px-8;
}

1
frontend/src/features/workspaces/views/WorkspaceCreateView.vue
View File

@@ -143,6 +143,7 @@
</template>
<style scoped>
@reference "@/assets/main.css";
.page-shell {
@apply mx-auto flex w-full max-w-6xl flex-col gap-6 px-5 py-8 md:px-8;
}

1
frontend/src/features/workspaces/views/WorkspaceSettingsView.vue
View File

@@ -829,6 +829,7 @@
</template>
<style scoped>
@reference "@/assets/main.css";
.workspace-settings-shell {
@apply mx-auto flex w-full max-w-6xl flex-col gap-6 px-5 py-8 md:px-8;
}

1
frontend/src/layouts/main/AppBar.vue
View File

@@ -196,6 +196,7 @@
</template>
<style scoped>
@reference "@/assets/main.css";
.side-container {
@apply sticky top-0 z-20 flex flex-col gap-4 px-5 py-4 md:flex-row md:items-center md:justify-between;
background: rgba(255, 250, 242, 0.82);

1
frontend/src/layouts/main/AppSidebar.vue
View File

@@ -634,6 +634,7 @@
</template>
<style scoped>
@reference "@/assets/main.css";
.app-sidebar {
@apply flex h-full w-[19rem] flex-shrink-0 flex-col px-4 pt-4 transition-[width,padding] duration-200;
border-right: 1px solid rgba(23, 32, 51, 0.08);

1
frontend/src/layouts/main/SidebarUserMenu.vue
View File

@@ -153,6 +153,7 @@
</template>
<style scoped>
@reference "@/assets/main.css";
.sidebar-workspace {
@apply relative flex flex-col gap-2;
}

1
frontend/src/layouts/main/WorkspaceSelector.vue
View File

@@ -322,6 +322,7 @@
</template>
<style scoped>
@reference "@/assets/main.css";
.label {
@apply hidden text-nowrap md:inline;
}

1
frontend/src/static/components/LandingSiteMenu.vue
View File

@@ -262,6 +262,7 @@
</script>
<style scoped>
@reference "@/assets/main.css";
.site-menu {
@apply sticky top-0 z-30 w-full;
background: rgba(255, 250, 242, 0.9);

1
frontend/src/static/views/BlogsPage.vue
View File

@@ -28,6 +28,7 @@
</template>
<style scoped>
@reference "@/assets/main.css";
.public-page {
@apply min-h-screen w-full;
}

1
frontend/src/static/views/GuidesPage.vue
View File

@@ -28,6 +28,7 @@
</template>
<style scoped>
@reference "@/assets/main.css";
.public-page {
@apply min-h-screen w-full;
}

1
frontend/src/static/views/Landing.vue
View File

@@ -154,6 +154,7 @@
</template>
<style scoped>
@reference "@/assets/main.css";
.landing-page {
@apply min-h-screen w-full;
}

1
frontend/src/static/views/PricingPage.vue
View File

@@ -96,6 +96,7 @@
</template>
<style scoped>
@reference "@/assets/main.css";
.public-page {
@apply min-h-screen w-full;
}

1
frontend/src/static/views/ProductFeaturePage.vue
View File

@@ -87,6 +87,7 @@
</template>
<style scoped>
@reference "@/assets/main.css";
.public-page {
@apply min-h-screen w-full;
}

1
frontend/src/static/views/ProductPage.vue
View File

@@ -56,6 +56,7 @@
</template>
<style scoped>
@reference "@/assets/main.css";
.public-page {
@apply min-h-screen w-full;
}