Basic Design System
Using tailwind we can very quickly construct a design system, an example of which is below. We can add custom colors, icons, fonts etc by customising the tailwind.config.js
Branding
Here we have an example of a single logo SVG taken from the sprite, using classes to modify the text color with css alone, including dark mode modifiers.
Extended Colors
As well as the default tailwind colors, we can also add our brand colors into the config and use them across multiple modifiers like .bg-color-name & .text-color-name
Typography
By default, Tailwind provides 10 font-size utilities. You change, add, or remove these by editing the theme.fontSize section of your Tailwind config.
- Thin
- Extralight
- Light
- Normal
- Medium
- Semibold
- Bold
- Extrabold
- Black
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
Another thing I've done in the past is put a code tag inside of a link, like if I wanted to tell you about the tailwindcss/docs repository. I don't love that there is an underline below the backticks but it is absolutely not worth the madness it would require to avoid it.
.h-6
.h-8
.h-12
.h-12 .bg-violet
Notifications & alerts
Examples of combining all of the above to create some basic notification and alert banners.
Successfully uploaded
Error: There was a problem
Notification text
Receive notifications
Notifications may include alerts, sounds, and badges.
- Skip to section