Configuring Tailwind as a Design System

1. colors

   1 3 1,435 7.0 TypeScript

   A gorgeous, accessible color system. (by radix-ui)

   

   Because I'm using Radix Colors here, I don't need to set the .dark scope as that's already done for me. If you don't like the Radix colors, you can customise them, use another library or write your own.

2. Civic Auth

   www.civic.com featured

   Auth in Less Than 5 Minutes. Civic Auth comes with multiple SSO options, optional embedded wallets, and user management — all implemented with just a few lines of code. Start building today.

   

3. Tailwind CSS

   2 1,499 87,351 9.9 TypeScript

   A utility-first CSS framework for rapid UI development.

   

   Using my default stack of React with Tailwind, I'll show you how setting your own defaults for typography, colour and spacing is not just the starting point for differentiating your app's look and feel. More importantly, it drastically cuts down the code we have to write and maintain, which reduces the mental load of implementing styles in a systematic, consistent and error-free way.

4. React

   3 1,929 234,835 9.9 JavaScript

   The library for web and native user interfaces.

   

   Using my default stack of React with Tailwind, I'll show you how setting your own defaults for typography, colour and spacing is not just the starting point for differentiating your app's look and feel. More importantly, it drastically cuts down the code we have to write and maintain, which reduces the mental load of implementing styles in a systematic, consistent and error-free way.

Suggest a related project