Which version of Tailwind CSS does this skill use?

The skill specifically implements Tailwind CSS v4 using the Vite plugin, avoiding deprecated Astro integrations.

How does it connect to WordPress?

It uses a lightweight GraphQL client to connect to the WPGraphQL endpoint, typically defined via environment variables like PUBLIC_CMS_URL.

Does it require React for everything?

No, it follows Astro best practices by using React only for interactive 'islands' like modals or dropdowns, keeping the rest of the site server-rendered.

What UI components are included?

It provides templates for common site sections including Header, Footer, Hero, PostCards, and Feature Grids using shadcn/ui patterns.

Astro WordPress Headless Frontend

Name: Astro WordPress Headless Frontend
Author: cdryampi

bycdryampi

设计工具

Builds high-performance Astro frontends with Tailwind CSS v4 and WordPress GraphQL integration.

关于

This skill streamlines the development of headless WordPress frontends by leveraging Astro's speed and Tailwind CSS v4's modern styling capabilities. It automates the setup of a production-ready stack within the frontend directory, including WPGraphQL data fetching, React islands for selective interactivity, and shadcn/ui components. By focusing on server-rendered content and minimal client-side JavaScript, it ensures a fast, SEO-friendly site that integrates seamlessly with WordPress backends.

主要功能

Implements a dedicated WPGraphQL data layer for efficient WordPress content fetching
Configures Tailwind CSS v4 via Vite plugin for modern, high-performance styling
Generates standardized page templates for home, blog lists, and individual post slugs
0 GitHub stars
Architects Astro pages with React islands for optimized performance and minimal JS overhead
Automates Docker and configuration setup for consistent development and deployment environments

使用场景

Implementing specific UI components like feature grids and hero sections for WordPress-driven sites
Migrating existing frontend files to Tailwind CSS v4 and modern Vite-based workflows
Bootstrapping a new high-performance Astro frontend for a headless WordPress project

关于

主要功能

Implements a dedicated WPGraphQL data layer for efficient WordPress content fetching
Configures Tailwind CSS v4 via Vite plugin for modern, high-performance styling
Generates standardized page templates for home, blog lists, and individual post slugs
0 GitHub stars
Architects Astro pages with React islands for optimized performance and minimal JS overhead
Automates Docker and configuration setup for consistent development and deployment environments

使用场景

Implementing specific UI components like feature grids and hero sections for WordPress-driven sites
Migrating existing frontend files to Tailwind CSS v4 and modern Vite-based workflows
Bootstrapping a new high-performance Astro frontend for a headless WordPress project