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

0•

Design Tools

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.

Key Features

01Implements a dedicated WPGraphQL data layer for efficient WordPress content fetching

02Configures Tailwind CSS v4 via Vite plugin for modern, high-performance styling

03Generates standardized page templates for home, blog lists, and individual post slugs

040 GitHub stars

05Architects Astro pages with React islands for optimized performance and minimal JS overhead

06Automates Docker and configuration setup for consistent development and deployment environments

Use Cases

01Implementing specific UI components like feature grids and hero sections for WordPress-driven sites

02Migrating existing frontend files to Tailwind CSS v4 and modern Vite-based workflows

03Bootstrapping a new high-performance Astro frontend for a headless WordPress project

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add cdryampi/wordpress_headless astro-frontend-ui

For use in Claude.ai and ChatGPT

Download Skill