Styling Guide

Tailwind CSS Configuration

Base Configuration (tailwind.config.js)

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        "blue-925": "#166CDD",
        "pink-525": "#EE2A7B",
      },
    },
  },
  plugins: [],
};

Style Organisation

1. Global Styles

2. Base styles in styles/globals.css

3. Theme variables
4. Typography defaults

5. Reset styles

6. Component Styles

7. Tailwind utility classes

8. Component-specific styles
9. Responsive variants

10. State variations

11. Theme Configuration

12. Custom colours
13. Typography scale
14. Spacing system
15. Breakpoints

Best Practices

1. Utility-First Approach

2. Use Tailwind utilities

3. Avoid custom CSS
4. Maintain consistency

5. Follow DRY principles

6. Responsive Design

7. Mobile-first approach

8. Breakpoint consistency
9. Fluid typography

10. Flexible layouts

11. Performance

12. Purge unused styles
13. Optimise for production
14. Minimise custom CSS
15. Use CSS variables

Common Patterns

Button Styles

// Primary Button
<button className="bg-blue-925 text-white px-4 py-2 rounded-md hover:bg-blue-800">
  Click Me
</button>

// Secondary Button
<button className="border border-pink-525 text-pink-525 px-4 py-2 rounded-md hover:bg-pink-50">
  Cancel
</button>

Form Elements

// Input Field
<input className="border rounded-md px-3 py-2 focus:ring-2 focus:ring-blue-925" />

// Select Dropdown
<select className="border rounded-md px-3 py-2 appearance-none bg-white">
  {/* options */}
</select>

Layout Components

// Card Container
<div className="bg-white rounded-lg shadow-md p-6">
  {/* content */}
</div>

// Grid Layout
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  {/* items */}
</div>

Dark Mode Support

1. Configuration

2. System preference detection

3. Manual toggle support

4. Persistent preference

5. Implementation

   // Dark mode variants
   <div className="bg-white dark:bg-gray-800 text-gray-900 dark:text-white">
     {/* content */}
   </div>
   

Notes

• Uses CSS-in-JS sparingly
• Maintains design system
• Supports theming
• Optimises for production
• Follows accessibility guidelines