Astro + Tailwind CSS Development
Expert assistance for building scalable, high-performance web applications using the Astro framework with TypeScript and Tailwind CSS.
Capabilities
This skill provides comprehensive guidance for Astro development, including:
Component development with .astro files and framework-specific componentsFile-based routing and dynamic page generationContent management with Markdown/MDX and collectionsPerformance optimization through partial hydrationTailwind CSS integration and best practicesSEO optimization and meta tag managementBuild and deployment strategiesInstructions
When assisting with Astro development, follow these guidelines:
1. Project Structure
Organize files following Astro's recommended structure:
```
src/
components/
layouts/
pages/
styles/
public/
astro.config.mjs
```
2. Component Development
Create `.astro` files for Astro components with proper compositionUse framework-specific components (React, Vue, Svelte) only when necessaryPass data using Astro's component propsLeverage built-in components like `<Markdown />` where appropriateImplement proper component reusability patterns3. Routing and Pages
Utilize file-based routing in `src/pages/` directoryImplement dynamic routes using `[...slug].astro` syntaxUse `getStaticPaths()` for generating static pages with dynamic routesCreate `404.astro` for proper 404 handling4. Performance Optimization
Minimize client-side JavaScript; prioritize static generationUse `client:*` directives judiciously: - `client:load` for immediately needed interactivity
- `client:idle` for non-critical interactivity
- `client:visible` for components that should hydrate when visible
Implement lazy loading for images and assetsUtilize Astro's built-in asset optimization featuresPrioritize Core Web Vitals (LCP, FID, CLS)5. Styling with Tailwind CSS
Integrate Tailwind CSS using `@astrojs/tailwind`Use Tailwind utility classes extensively in componentsLeverage responsive design utilities (`sm:`, `md:`, `lg:`, etc.)Utilize Tailwind's color palette and spacing scale for consistencyExtend custom themes in `tailwind.config.cjs` when necessary**NEVER use the `@apply` directive**Implement scoped styling with `<style>` tags in `.astro` files when needed6. Content Management
Use Markdown (`.md`) or MDX (`.mdx`) files for content-heavy pagesLeverage frontmatter in Markdown filesImplement content collections for organized content managementUse `Astro.glob()` for working with local files efficiently7. Data Fetching
Use `Astro.props` for passing data to componentsImplement `getStaticPaths()` for fetching data at build timeImplement proper error handling for data fetching operations8. SEO and Meta Tags
Use Astro's `<head>` tag for meta informationImplement canonical URLs for proper SEOCreate reusable SEO component patternsGenerate RSS feeds for content-heavy sites9. TypeScript Usage
Write TypeScript for enhanced type safetyUse descriptive variable names following Astro conventionsImplement proper typing for component props and data structures10. Accessibility
Ensure proper semantic HTML structureImplement ARIA attributes where necessaryEnsure keyboard navigation support for interactive elements11. Testing and Quality
Implement unit tests for utility functions and helpersUse end-to-end testing tools like Cypress for built site testingUse Lighthouse and WebPageTest for performance auditingImplement performance budgets and monitoring12. Build and Deployment
Optimize builds using Astro's build commandHandle environment variables properly for different environmentsTarget static hosting platforms (Netlify, Vercel, etc.)Implement CI/CD pipelines for automated buildsCode Style
Write concise, technical responses with accurate Astro examplesFollow Astro's Style Guide for consistent formattingImplement proper error handling and loggingUse Astro's official integrations when availableReferences
Refer to Astro's official documentation for detailed information on components, routing, integrations, and best practices.