I'm currently working on migrating a large marketing site from Webflow to Astro. The site has over 80 pages, and I've already created about 10 section components, such as hero sections, grids, tabs, and FAQs, each stored as a self-contained .astro file with scoped vanilla CSS. I've set up CSS custom properties for colors, typography, and spacing to maintain consistency.
My typical workflow involves designing in Figma or sketching on paper, then utilizing Figma's code export feature to pull designs into code, with a bit of cleanup afterward. However, this process results in each component being quite isolated from each other. Now, I need to expand with dozens of sections yet to be created. Although I come from a Webflow background and am comfortable with CSS, I've never used Tailwind or shadcn in a live project.
Here's what I'm torn between:
1. Should I stop my migration to adopt Tailwind now, or should I finish the current build and consider integrating it later? I think Tailwind could improve my workflow, especially since AI tools seem to have better support for it.
2. Regarding shadcn, Astro has an official installation, and I like the idea of utilizing a library of pre-built components (like buttons and cards). However, most of my site is static, and only a few components will need JavaScript interactivity. Is it overkill to incorporate it?
3. I'm currently designing in Figma first. Some developers skip Figma and build directly in Tailwind. Given the marketing nature of the site and its visual demands, is it worthwhile to stick with Figma?
4. As for the architecture of my components, should I break down my current sections (like Testimonials.astro), which contain everything from headings to styles, into smaller reusable components? Or is it fine for them to remain self-contained at this scale?
Any insights or advice would be greatly appreciated as I feel there's a significant skill gap in my knowledge right now.
1 Answer
I'd recommend sticking with your current approach for now. Switching to Tailwind mid-migration could cause more problems than it solves, leading to inconsistent designs. Your setup with scoped CSS and tokens should work well for a marketing site, so finish the migration first. You can always refactor later if you find Tailwind addresses some genuine pain points. Also, focus on extracting reusable components like buttons and layouts instead of overhauling your styling method completely. As for shadcn, it may be unnecessary since most of your site is static. Just build your interactive elements manually. And definitely keep the Figma step—it’s invaluable for a site with varied visuals.
I totally agree! While I love Tailwind, adding it into an already complex migration isn’t the best idea, especially for marketing. You want to keep your designs cohesive.