Using TailwindCSS (Tss) in a Vue 3 Resume Project: Concepts, Implementation, and Optimization
This article walks through the author's journey of rebuilding an online resume with Vue 3 and TailwindCSS, explaining core Tailwind concepts, practical code examples, theme switching, and build‑time optimizations to achieve a maintainable, responsive, and lightweight frontend solution.
Introduction
The author, after seven years of development experience and a recent job loss, decided to restart a technical blog and create a practical project: an online résumé built with Vue 3, TypeScript, Pinia, and TailwindCSS (referred to as Tss). The article mixes personal anecdotes with a step‑by‑step tutorial.
What You Can Achieve with This Article
Learn to use TailwindCSS flexibly in a real project.
Understand the core concepts of TailwindCSS.
Get a concise Tss cheat‑sheet.
See a Vite + Vue 3 implementation with related optimizations.
Fork or star the résumé template repository.
Visit the live demo at https://resume.fridolph.top/.
Why Learn TailwindCSS
The author compares TailwindCSS to Bootstrap, noting that utility‑first classes eliminate the need for custom class names and reduce CSS bloat. The article emphasizes that practical experience, not just theory, is essential for mastering the framework.
New vs. Old Project Comparison
The old App.vue lacked scoped styles, causing global CSS leakage. The new version uses Tailwind utilities, resulting in cleaner markup and isolated styling.
<style>
.page-resume p { margin: 10px 0; }
</style>In the new approach, the same effect is achieved with Tailwind classes directly in the HTML.
Hobby Module – Transition Example
A simple transition is demonstrated using Tailwind classes. The HTML becomes verbose, but the visual result matches the previous CSS implementation.
<div class="flex flex-wrap justify-content">
<div class="group overflow-hidden relative ring-1 ring-slate-200 rounded flex items-center justify-center size-12 mr-3 mb-3 origin-center align-center">
</div>
</div>Hover and focus states are handled by adding additional utility classes, avoiding separate CSS files.
Core Tailwind Concepts
Utility‑first fundamentals
Handling states (hover, focus, etc.)
Responsive design
Dark mode
Reusing styles
Adding custom styles
Functions & directives
Examples show how pseudo‑classes, pseudo‑elements, media queries, and attribute selectors are expressed with Tailwind utilities.
Responsive Design and Mobile‑First Breakpoints
Tailwind’s mobile‑first breakpoint system (sm, md, lg, xl) is highlighted, with examples of applying different utilities at each breakpoint.
Theme Switching (Dark Mode)
Custom CSS variables for light and dark themes are defined in var.css . The HTML root receives a dark class to toggle themes, and Tailwind’s dark: prefix applies the appropriate colors.
:root {
--page-bg: #c5dae2;
--dark-page-bg: #1f2635;
}
<html class="dark">
<div class="bg-white dark:bg-black">...Custom Styles and Configuration
Tailwind’s tailwind.config.js is extended to add custom animations, keyframes, and additional utilities. The article shows how to define an animation called singerShake and use it via animate-[singerShake_3s_ease-in-out_infinite] .
export default {
theme: {
extend: {
animation: {
singerShake: 'singerShake linear infinite',
},
keyframes: {
singerShake: {
'0%, 100%': { transform: 'translateX(0)' },
'10%, 30%, 50%, 70%, 90%': { transform: 'translateX(-2px) scale(1.05)' },
'20%, 40%, 60%, 80%': { transform: 'translateY(2px) scale(1)' },
},
},
},
},
};Optimizations
To keep the CSS bundle small, the author extracts reusable utilities into a separate styles/tailwind.css file and uses @apply to compose complex classes. The @layer components block groups custom utilities like .hobby-fromBottom and .dark-transition .
@layer components {
.hobby-fromBottom { @apply translate-y-full transition-transform ease-in-out duration-500 group-hover:translate-y-0; }
.dark-transition { @apply transition-colors duration-1000 ease-in-out; }
}Build and Request Optimizations
Using Vite, the author adds plugins for compression (gzip), chunk splitting, and import optimization. Nginx configuration demonstrates cache‑control headers for different asset types and enables gzip compression.
server {
location ~* \.(css|js|md|pdf)$ { expires 1d; add_header Cache-Control "max-age=86400"; }
location ~* \.(jpg|png|svg|ico|woff|woff2)$ { expires 7d; add_header Cache-Control "max-age=604800"; }
gzip on; gzip_min_length 1k; gzip_comp_level 2;
}Conclusion
The article wraps up by reiterating the four core Tailwind concepts—utility‑first, state handling, responsive design, and style reuse—while encouraging readers to experiment with TailwindCSS in their own projects. Links to the GitHub repository and live demo are provided, and the author invites feedback and stars.
Rare Earth Juejin Tech Community
Juejin, a tech community that helps developers grow.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.