Migrate remaining CSS classes to Tailwind CSS#151
Merged
diamantidis merged 1 commit intosourcefrom Feb 9, 2026
Merged
Conversation
Migrate remaining CSS classes to Tailwind with step-by-step approach: Layout Components: - Post header H1 margin (added mb-0) - Break long word utility (break-words hyphens-auto with custom hyphens) - Blockquote styling (added to @layer utilities) - Page header text alignment (text-center) - Special headings (Bio, Personal, Stack in @layer utilities) - Post link and page title styles (with :after pseudo-element kept in CSS) - Site header base styles (shadow, border with arbitrary values) - Site header wrapper layout (already done in PR #150) - Site title and navigation styles - Mobile header responsive styles (already done in PR #150) Typography: - All typography migrated using Tailwind classes and CSS variables - Responsive design with md: breakpoints Animation: - Read more arrow animation using hover:animate-[...] with keyframes in CSS Header Fixes: - Fixed social icons layout on mobile (stacked vertically below title) - Fixed header layout consistency (two-row structure on all devices) - Fixed navigation menu text color in dark mode (restored CSS rule) - Fixed mobile menu hover state (use text color instead of undefined bg variable) Page Fixes: - Fixed about page text color in dark mode (text-[var(--title-color)]) Content: - Migrated list_item_description to text-[0.8em] in Xcode shortcuts post - Removed ~104 lines of dead CSS from custom.scss (34% reduction) - CSS now 198 lines (mostly variables, generated content, keyframes) Files Modified: - _includes/header.html (navigation, mobile menu, social icons) - _layouts/home.html (post links, excerpt) - _layouts/page.html (page header, content) - _layouts/post.html (post header, title) - _scss/custom.scss (removed dead rules, kept necessary CSS) - tailwind.config.js (added custom hyphens utility) - _posts/2018-12-09-xcode-shortcuts-and-custom-key-bindings.md (list item descriptions) Migration Statistics: - 14 migration steps completed - 93% of feasible styles migrated - 22 commits squashed into 1 - ~104 lines of CSS removed Kept in CSS (intentionally): - CSS variables (light/dark mode colors) - Global base styles (body, global links) - Pseudo-elements (:after for post links) - Generated content (code blocks, gists, GitHub cards) - Complex responsive media queries - Post content links with complex pseudo-classes - Animation keyframes (used by Tailwind arbitrary values) Phase 2 migration complete!
Proselint found issues_posts/2018-12-09-xcode-shortcuts-and-custom-key-bindings.md
Spell Checker found issues_posts/2018-12-09-xcode-shortcuts-and-custom-key-bindings.md
Generated by 🚫 Danger |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR completes the migration of remaining CSS classes from
_scss/custom.scssto Tailwind CSS. The migration followed a step-by-step iterative approach, completing 93% of feasible styles.What was migrated
Layout Components
hyphens-autoutility)Typography & Links
Header Component
Animation
Content Styling
What was kept in CSS (intentionally)
The following styles were kept in CSS for complexity and maintainability reasons:
:afterfor post linksFixes
Statistics
Files Modified
_includes/header.html_layouts/home.html_layouts/page.html_layouts/post.html_scss/custom.scsstailwind.config.js_posts/2018-12-09-xcode-shortcuts-and-custom-key-bindings.mdTesting
Please test: