Tailwind Capacitor

What it does

This skill enables AI agents to install and configure the tailwind-capacitor plugin within Capacitor projects. It streamlines the integration of Tailwind CSS utility classes, allowing for rapid styling directly inside HTML or template files without manual CSS file management.

When to use it

• You are building a hybrid mobile application using Capacitor and need consistent UI styling across platforms.
• Your project requires quick prototyping where you want to apply utility-first CSS classes immediately.
• You need to automate the setup of Tailwind CSS configuration files (e.g., tailwind.config.js) for new Capacitor apps.
• You are refactoring an existing Capacitor app to adopt a utility-class-based styling approach.

Key capabilities

• Installs the official @capacitor/tailwind plugin into the project dependencies.
• Configures Tailwind CSS paths to recognize Capacitor-specific directories like www, dist, and android/app/src/main/assets.
• Sets up necessary build scripts to ensure Tailwind processes styles correctly during the native compilation process.

Example prompts

• "Install the tailwind-capacitor plugin in my current Capacitor project."
• "Configure Tailwind CSS for a new Capacitor app so I can use utility classes in my HTML templates."
• "Set up the build configuration to integrate Tailwind with my Capacitor Android and iOS builds."

Tips & gotchas

Ensure your capacitor.config.ts or .js file correctly points to the output directory (usually www) so Tailwind can scan for utility classes during the build process. If styling does not apply after installation, verify that the plugin is listed in your package.json dependencies and that you have run npx cap sync to update native platforms.