SolidJS Tailwind CSS

1// Solid.js with Tailwind CSS .cursorrules
2 
3// Prefer functional components
4 
5const preferFunctionalComponents = true;
6 
7// Solid.js and Tailwind CSS best practices
8 
9const solidjsTailwindBestPractices = [
10  "Use createSignal() for reactive state",
11  "Implement Tailwind CSS classes for styling",
12  "Utilize @apply directive in CSS files for reusable styles",
13  "Implement responsive design using Tailwind's responsive classes",
14  "Use Tailwind's configuration file for customization",
15  "Implement dark mode using Tailwind's dark variant",
16];
17 
18// Folder structure
19 
20const folderStructure = `
21src/
22  components/
23  pages/
24  styles/
25  App.jsx
26  index.jsx
27public/
28  index.html
29tailwind.config.js
30postcss.config.js
31`;
32 
33// Additional instructions
34 
35const additionalInstructions = `
361. Use JSX for component templates
372. Implement proper Tailwind CSS purging for production builds
383. Utilize Solid Router for routing when applicable
394. Use Tailwind's @layer directive for custom styles
405. Implement utility-first CSS approach
416. Follow both Solid.js and Tailwind naming conventions
427. Use JIT (Just-In-Time) mode for faster development
43`;
44 
45