All databases

Cursor rule

Solidjs Tailwind Cursorrules Prompt File

Cursor rules for Solid.js development with Tailwind CSS integration.

Prefer functional components

js
const preferFunctionalComponents = true;

Solid.js and Tailwind CSS best practices

js
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

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

Additional instructions

js
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
`;

More Frontend rules

Frequently asked questions

What is the Solidjs Tailwind Cursorrules Prompt File Cursor rule?

Cursor rules for Solid.js development with Tailwind CSS integration. It is a Frontend rule covering Tailwind, stored as solidjs-tailwind-cursorrules-prompt-file.mdc.

How do I use the Solidjs Tailwind Cursorrules Prompt File rule in Cursor?

Copy the rule from this page and save it as solidjs-tailwind-cursorrules-prompt-file.mdc in your project's .cursor/rules folder, or paste it into Cursor's project rules settings.