Rule

solidjs tailwind

via PatrickJS/awesome-cursorrules

Solid.js development with Tailwind CSS integration and best practices.

What is solidjs tailwind?

This rule provides guidance for building Solid.js applications with Tailwind CSS styling. It covers reactive state management with createSignal(), Tailwind class implementation, responsive design patterns, and recommended project structure to streamline development workflows.

Use createSignal() for reactive state management in Solid.js components
Implement Tailwind CSS classes and @apply directives for styling
Build responsive designs using Tailwind's responsive utility classes
Configure dark mode and custom themes via tailwind.config.js
Organize projects with standard folder structure (components, pages, styles)
Apply utility-first CSS approach with @layer directives for custom styles

Applies to

File patterns this rule matches.

**/*

Rule definition (reference)

Source of truth, from the repository.

// Solid.js with Tailwind CSS .cursorrules

// Prefer functional components

const preferFunctionalComponents = true;

// Solid.js and Tailwind CSS best practices

const solidjsTailwindBestPractices = [ "Use createSignal() for reactive state", "Implement Tailwind CSS classes for styling", "Utilize @apply directive in CSS files for reusable styles", "Implement responsive design using Tailwind's responsive classes", "Use Tailwind's configuration file for customization", "Implement dark mode using Tailwind's dark variant", ];

// Folder structure

const folderStructure = src/ components/ pages/ styles/ App.jsx index.jsx public/ index.html tailwind.config.js postcss.config.js;

// Additional instructions

const additionalInstructions = `