45 lines
1.1 KiB
Plaintext
45 lines
1.1 KiB
Plaintext
// 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 = `
|
|
1. Use JSX for component templates
|
|
2. Implement proper Tailwind CSS purging for production builds
|
|
3. Utilize Solid Router for routing when applicable
|
|
4. Use Tailwind's @layer directive for custom styles
|
|
5. Implement utility-first CSS approach
|
|
6. Follow both Solid.js and Tailwind naming conventions
|
|
7. Use JIT (Just-In-Time) mode for faster development
|
|
`;
|
|
|