Appearance
Tailwind CSS
Tailwind 3
Codey currently uses Tailwind CSS version 3, which is not the latest version. Be aware when visiting the documentation.
Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build custom designs directly in your markup. Unlike traditional CSS frameworks that come with pre-designed components, Tailwind gives you the building blocks to create your own unique designs without leaving your HTML.
Mobile-First Design Philosophy
One of Tailwind's core strengths is its mobile-first approach. By default, all utility classes apply to all screen sizes, and you use responsive prefixes (xs:, sm:, md, lg:, xl:) to apply styles at larger breakpoints. This ensures your designs work seamlessly across all device sizes, starting with mobile devices and progressively enhancing for larger screens.
For more details on implementing mobile-first responsive design with Tailwind, see the official responsive design documentation.
Breakpoint Range
Caution
A range is intended to be used in specific cases where the normal breakpoint would not suffice. It is important to uphold the mobile first approach and not abuse breakpoint ranges to create layouts where desktop is seen as the default size.
In some cases, like having to override your own styles, it can be useful to use a breakpoint range. For example, hidden md:block can also be written as max-md:hidden. This will set the hidden class until the md breakpoint is reached instead of overriding your own styles.
Besides your own styles it can also be useful to retain default styles. For example, you need to have a smaller font-size from mobile until the md breakpoint. After that you want the default font-size set by the page. In this case, without using a breakpoint range, you would have to manually set the default font-size from the md breakpoint. This can be tricky as it can change without your own styles being updated, leading to inconsistencies. So using a max-md here can easily prevent this issue.
Design System Integration
In our Codey design system, we've seamlessly integrated Tailwind CSS with our design tokens to maintain consistency across all applications. Our custom Tailwind preset automatically maps design tokens from Figma to CSS custom properties, ensuring that:
- Color tokens are automatically synchronized with our design system through our Figma token import workflow
- Typography, spacing, and other design tokens are consistently available as Tailwind utilities
- Theme switching is supported through CSS custom properties, enabling future features like dark mode
This integration means you can use Tailwind's familiar utility classes while staying true to our design system's visual guidelines and tokens.