AI SummaryCursor-specific rules for Tailwind CSS configuration and best practices tailored to Gabriel Ribeiro's portfolio, integrating shadcn/ui components with dark/light theme support. Developers building Next.js portfolios with Cursor IDE will benefit from these pre-configured styling guidelines.
Install
Copy this and paste it into Claude Code, Cursor, or any AI assistant:
I want to add the "portfolio — Cursor Rules" prompt rules to my project. Repository: https://github.com/ribeirogab/portfolio Please read the repo to find the rules/prompt file, then: 1. Download it to the correct location (.cursorrules, .windsurfrules, .github/prompts/, or project root — based on the file type) 2. If there's an existing rules file, merge the new rules in rather than overwriting 3. Confirm what was added
Description
Tailwind CSS configuration and best practices for Gabriel Ribeiro's portfolio
Overview
This document outlines the Tailwind CSS configuration, usage patterns, and best practices for Gabriel Ribeiro's portfolio project. Tailwind CSS provides utility-first styling that enables rapid development of responsive, consistent, and maintainable user interfaces. The project integrates Tailwind with shadcn/ui components and supports dark/light theme switching.
Principles
• Utility-First: Use utility classes for consistent and predictable styling • Component Composition: Build complex designs from simple utility classes • Responsive Design: Mobile-first approach with responsive utilities • Design System: Maintain consistency through design tokens and custom utilities • Performance: Optimize CSS bundle size through purging unused styles • Theme Support: Implement comprehensive dark/light theme switching
Applicability
• When to apply: When styling components, layouts, or implementing responsive designs • When not to apply: For component logic or data management concerns
Configuration
The project uses a customized Tailwind configuration: `typescript // tailwind.config.ts import type { Config } from "tailwindcss"; const config: Config = { darkMode: ["class"], content: [ "./pages/*/.{ts,tsx}", "./components/*/.{ts,tsx}", "./app/*/.{ts,tsx}", "./src/*/.{ts,tsx}", ], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, // Additional theme colors... }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")], }; export default config; `
Discussion
Health Signals
My Fox Den
Community Rating
Sign in to rate this booster
Works With
Any AI assistant that accepts custom rules or system prompts