Skip to main content
affpapa.org
RU EN
rule

Tailwind + shadcn/ui — Cursor rule: what it does, install

This Cursor rule guides Tailwind and shadcn/ui work, asking the assistant to outline a plan before writing readable TypeScript and Next.js code.

Install into Cursor · Manually: put the files in place All methods and platforms ↓ 
.cursor/rules/tailwind-shadcn-ui-integration-cursorrules-prompt-.mdc
Open on GitHub

What tailwind-shadcn-ui-integration-cursorrules-prompt- does

The rule steers the assistant toward readable TypeScript and Next.js code for work involving Tailwind and shadcn/ui. Before coding, it asks for a pseudocode plan and confirmation. It also calls for complete implementations and a check of the finished work.

It directs the assistant to keep project files under src, include required imports, and use clear component names. One detail to account for: the prompt addresses an assistant in VSCode, while this file is meant for Cursor. The src instruction fits projects that keep their source files in that folder.

What it helps with

  • set coding guidance for Tailwind and shadcn/ui tasks
  • ask the assistant to get a plan approved before coding
  • direct project file work to src
  • avoid unfinished features and missing imports

Example prompts for the agent

  • Build a TypeScript and Next.js interface with Tailwind and shadcn/ui; propose a plan first.
  • Add the requested feature to the project, whose source files are in src, and check the finished code.

How to install tailwind-shadcn-ui-integration-cursorrules-prompt-

Manually: put the files in place

.cursor/rules/tailwind-shadcn-ui-integration-cursorrules-prompt-.mdc

Frontmatter: description, globs, alwaysApply

Step by step, with commands for each platform: Cursor rules: .mdc files, four modes and what replaced .cursorrules

Questions about tailwind-shadcn-ui-integration-cursorrules-prompt-

How do I install the Tailwind + shadcn/ui rule in Cursor?

Add the rule file at .cursor/rules/tailwind-shadcn-ui-integration-cursorrules-prompt-.mdc.

What does this rule do?

It guides Tailwind and shadcn/ui work, with directions for readable TypeScript and Next.js code, planning before implementation, and checking the result.

Where does the rule expect source files to be?

It points to src. That instruction matches projects that keep their source files in that directory.

Source text

tailwind-shadcn-ui-integration-cursorrules-prompt-.mdc · CC0-1.0 
---
description: "Cursor rules for Tailwind development with shadcn/ui integration."
globs: **/*
alwaysApply: false
---
You are an expert AI programming assistant in VSCode that primarily focuses on producing clear, readable Typescript NextJS code.

You are thoughtful, give nuanced answers, and are brilliant at reasoning. You carefully provide accurate, factual, thoughtful answers, and are a genius at reasoning.

Follow the user’s requirements carefully & to the letter.

First think step-by-step - describe your plan for what to build in pseudocode, written out in great detail.

Confirm, then write code!

Always write correct, up to date, bug free, fully functional and working, secure, performant and efficient code.

Focus on readability over being performant.

Fully implement all requested functionality.

Leave NO todo’s, placeholders or missing pieces.

Ensure code is complete! Verify thoroughly finalized.

Include all required imports, and ensure proper naming of key components.

Be concise. Minimize any other prose.

If you think there might not be a correct answer, you say so. If you do not know the answer, say so instead of guessing.

Tech Stack

Files are located inside the src folder.

© PatrickJS · CC0-1.0 · PatrickJS/awesome-cursorrules

Similar IDE rules

All IDE rules for Frontend and UI →
winui3 official github This rule guides GitHub Copilot on WinUI 3 and Windows App SDK patterns, from XAML bindings to window management. Use it when working on a Windows desktop app. ★ 40,451repo stars vue official github A Copilot instruction file that sets Vue 3 conventions: Composition API, <script setup>, reactivity, Pinia and Vue Router. Useful when the agent writes components your way. ★ 40,451repo stars tanstack-start-shadcn-tailwind official github A Copilot instruction file that pins the stack to TanStack Start, Shadcn/ui and Tailwind CSS, with Zod validating every external payload. ★ 40,451repo stars tailwind-v4-vite official github This rule guides GitHub Copilot through setting up Tailwind CSS v4 in a Vite project with the official Vite plugin. It also covers migration from v3. ★ 40,451repo stars svelte official github Guides GitHub Copilot on Svelte 5 and SvelteKit 2 standards, enforcing runes reactivity, TypeScript props, and safe SSR data loading. ★ 40,451repo stars power-bi-custom-visuals-development official github A GitHub Copilot rule that gives the agent patterns for building Power BI custom visuals with React, D3.js and TypeScript. ★ 40,451repo stars

From the same set210

tanstack-start-cursorrules-prompt-file Guides Cursor when building with TanStack Start, covering server functions, file-based routes, SSR, and streamed data. ★ 41,024repo stars tanstack-router A Cursor rule that sets agent conventions for TanStack Router v1: file-based routes, typed params and loader-based data fetching. ★ 41,024repo stars tanstack-query This Cursor rule guides TanStack Query v5 usage in React and TypeScript. Use it when building queries, mutations, pagination, or Suspense flows. ★ 41,024repo stars tanstack-query-v5-cursorrules-prompt-file A Cursor rule that tells the agent how to write TanStack Query v5 code: query keys, mutations, optimistic updates, Suspense and prefetching. ★ 41,024repo stars tailwind-react-firebase-cursorrules-prompt-file A Cursor rule that sets conventions for a mobile-first web app built with Tailwind, React and Firebase. ★ 41,024repo stars swiftui-guidelines-cursorrules-prompt-file This rule guides Cursor through SwiftUI architecture, concurrency, UI composition, and testing. Add it when you want those conventions reflected in code suggestions. ★ 41,024repo stars sveltekit-typescript-guide-cursorrules-prompt-file A Cursor rule that points the agent at Svelte 5, SvelteKit and TypeScript: project structure, runes, state handling. ★ 41,024repo stars sveltekit-tailwindcss-typescript-cursorrules-promp Defines project conventions for SvelteKit 2, Tailwind CSS, and TypeScript in Cursor. It keeps code consistent by enforcing typed components and proper directory structure. ★ 41,024repo stars

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor