Architecture Decision Record

Active theme: Light

← Decision record examples

Architecture Decision Record: Tailwind CSS

Decision: Use Tailwind CSS as di CSS framework to style user interface.

Wetin be Tailwind CSS?

Tailwind na utility-first CSS framework wey allow rapid development and customization of user interfaces. Dem design am to be highly customizable and e allow developers to write leaner and more efficient CSS. Dis framework provide set of pre-defined classes to style di UI very fast.

Context

We dey build web application for client wey need responsive and customizable user interface. Di client don ask for consistent and modern styling. Di development team get experience to use custom CSS but dem want explore CSS frameworks wey fit save time and effort. We dey look for framework wey easy to use, customizable, and get large community for support.

Decision Drivers

  • Easy to use: We want framework wey simple to learn and wey fit integrate into our development workflow.

  • Customizable: We want framework wey fit customize to match di client brand guidelines and theme.

  • Large community support: We want framework wey get active community of developers and designers wey fit provide help and resources wen need dey.

  • Time-saving: We want framework wey fit save time and effort to style di UI.

Considered Options

  • Bootstrap: Popular CSS framework with plenty pre-built components and large community of developers.

  • Foundation: Another popular CSS framework wey dem design for mobile-first development.

  • Materialize: CSS framework wey base on Google Material Design language with pre-built components for UI development.

  • Tailwind CSS: Utility-first CSS framework wey focus on customization and efficiency.

Decision Outcome

After we consider di options, we don decide to use Tailwind CSS for dis reasons:

  • Easy to use: Tailwind approach simple and easy to understand. Im utility classes make am faster to build UI.

  • Customizable: Tailwind allow customization by to provide set of configuration files wey allow developers to modify di framework default styles with ease.

  • Large community support: Tailwind get very active community of developers and designers wey dey consistently create new resources, plugins, and tools.

  • Time-saving: Tailwind fit save time, wey enable developers to focus on other areas of di project.

We go use Tailwind CSS utility classes to build di UI for our project. Di development team go use im atomic and modular design system to write efficient and scalable CSS code. We go leverage Tailwind pre-built templates and visual components to speed up di development process while we dey use custom styles to match di branding and theme of di client.

Credit: ChatGPT generate dis page, then dem edit am for clarity and format.