tailwind colors - a guide to navigating them all for text, backgrounds, borders, and more.
Most site owners will likely agree:
It can be incredibly challenging to convert visitors into email subscribers.
But you can substantially boost subscriptions by adding a single, high-converting page...
A page converting over 20% of visitors into new subscribers.
In this post, you'll discover this high-converting page type... and how to seamlessly add one to your own site.
Introduction to Tailwind Colors
Tailwind CSS provides a wide range of color utilities for styling text, backgrounds, borders, and more. The default color palette includes common color names like red
, blue
, green
, etc. Along with these basics, Tailwind makes it easy to customize and extend the default colors to match your brand.
The Default Tailwind Color Palette
Out of the box, Tailwind includes text color utilities for black and white (text-black
, text-white
) as well as background colors that match CSS named colors like bg-red-500
. These colors come in different shades, allowing you to pick the exact hue.
For example, to style blue text on a red background:
<div class="text-blue-900 bg-red-500">
Blue on red background
</div>
You can scan the full list of default Tailwind colors here, including gray, red, orange, yellow, green, teal, blue, indigo, purple, and pink shades.
Using Custom Colors in Tailwind
To use custom hex colors that aren't included in the default palette, add them under the colors
section of your Tailwind config file:
module.exports = {
theme: {
extend: {
colors: {
primary: '#cc5de8',
secondary: '#e7e7e7',
}
}
}
}
Then apply them using the text
, bg
, and border
utilities:
<div class="text-secondary bg-primary">
Custom colors
</div>
This allows unlimited customization for matching brand colors.
Styling Text and Background Colors
When selecting text and background color combinations, ensure there is sufficient contrast for readability. Light text on dark backgrounds and vice versa generally works best.
Also pay attention to color brightness. Using a light background color like gray with brighter text tends to look better than a bright background like yellow with darker text.
Adding Color to Borders and Other Elements
In addition to text and backgrounds, Tailwind's color utilities can style borders, SVGs, shadows, and more:
<button class="border-blue-500 text-blue-500">
Blue border button
</button>
<svg class="fill-red-600"/>
<div class="shadow-lg shadow-pink-400">
Pink shadow
</div>
Explore the full documentation on colors for additional examples.
Creating Dynamic Gradient Backgrounds
Tailwind also includes utilities for adding smooth, dynamic gradients to backgrounds and elements.
Some examples of preset gradients you can use:
<div class="bg-gradient-to-r from-fuchsia-500 via-purple-500 to-indigo-500">
Fuchsia to Indigo gradient
</div>
<div class="bg-gradient-to-b from-gray-300 via-white to-gray-300">
Top to bottom gray gradient
</div>
You can fully customize every aspect of gradients as well, including the colors, angles, and more.
This covers the basics of using Tailwind's expansive color utilities to customize designs. The options for shades, custom colors, gradients, and dynamic styling provide endless possibilities!
How do you give a border with color in Tailwind?
Adding a colored border to an element in Tailwind CSS is very simple using the border
and border-color
utilities.
Here is an example to add a red border:
<div class="border border-red-500">...</div>
This will apply a red border using the border-red-500
utility.
You can use any of the default Tailwind colors like red
, blue
, green
, etc or even custom colors.
Some examples:
<!-- Blue border -->
<div class="border border-blue-500">...</div>
<!-- Green border -->
<div class="border border-green-500">...</div>
<!-- Custom color border -->
<div class="border border-pink-500">...</div>
To control the border color on focus, hover or other states, use the state variants:
<!-- Blue border on focus -->
<div class="border border-red-500 focus:border-blue-500">...</div>
So in summary:
- Use
border
to add border - Use
border-color
utilities to set border color - Use state variants like
focus
to change border color on events
With this, you can easily add any colored border in Tailwind CSS!
How do you color text in Tailwind?
Tailwind CSS provides a wide range of text color utilities out of the box to style the text color of elements. Here are some tips for using text colors in Tailwind:
To set a text color, use the text-{color}
utilities like text-blue-500
. For example:
<p class="text-blue-500">This text is blue</p>
You can use any of Tailwind's default color names like red
, green
, blue
, etc or reference colors from the theme section of your tailwind.config.js
.
To set a text color on hover, use the hover:text-{color}
variant:
<p class="hover:text-purple-500">This text turns purple on hover</p>
To set a text color only when focused, use the focus:text-{color}
variant:
<input class="text-gray-900 focus:text-red-500" />
You can also customize the default text colors by editing the theme.extend.textColor
section in your Tailwind config file.
So in summary, use utilities like text-{color}
, hover:text-{color}
, and focus:text-{color}
to color text in Tailwind. The color names reference your theme colors configuration.
How do you write background color in Tailwind?
Controlling background color is a key aspect of web design. With Tailwind CSS, adding background colors is simple using the bg
utilities.
To add a background color, use the bg-{color}-{shade}
format. For example:
<div class="bg-blue-500">
<!-- Content -->
</div>
This will apply a blue background color to the div.
You can control background colors at different breakpoints using responsive prefixes:
<!-- Apply red bg color on small screens and up -->
<div class="sm:bg-red-500">
<!-- Content -->
</div>
<!-- Apply green bg color on medium screens and up -->
<div class="md:bg-green-500">
<!-- Content -->
</div>
So to summarize:
- Use
bg-{color}-{shade}
to apply a background color - Add responsive prefixes like
sm:
andmd:
to control colors at breakpoints
With this simple but flexible approach, you can customize background colors across screen sizes in Tailwind CSS.
sbb-itb-b5a6996
What are the colors in Tailwind CSS?
Tailwind CSS provides a wide range of colors that you can use for text, backgrounds, borders, and more. It uses a simple and intuitive naming system for accessing these colors.
By default, Tailwind has color names like red
, green
, blue
, gray
, etc. These allow you to quickly apply a color without having to look up hex values or RGB values.
Additionally, Tailwind uses a numeric scale from 50 to 900 for shades of gray, along with primary colors like red, blue, and yellow. For example:
text-gray-100
is a very light graytext-gray-500
is a medium graytext-gray-900
is almost black
The same concept applies to:
text-red-500
text-blue-800
text-yellow-300
And so on. The higher the number, the darker the color.
This naming system makes it easy to remember the available colors and quickly apply shades as needed. Whether you want a soft background or high contrast text, Tailwind colors have you covered.
The default color palette works well for most projects, but you can also customize the colors in Tailwind to match a brand style guide for example. Having full control over the shades is useful when needing very precise color use.
Overall, Tailwind simplifies working with color by eliminating hex codes and providing easy to remember names. Give the default palette a try first, then tweak it if needed later.
Tips for Complementary Color Schemes
Complementary colors are color pairs that are opposite each other on the color wheel. When used together in a design, they create high contrast and vibrancy. Complementary colors can form the basis for appealing color schemes. Here are some tips for working with complementary colors:
Monochromatic Color Palettes
Monochromatic color schemes use different shades, tones, and tints of a single hue. This creates cohesion, harmony, and visual interest. To build a monochromatic palette:
- Pick a base color such as blue, green, red, etc.
- Identify lighter tints of that color by adding white.
- Find darker shades by adding black or gray.
- Select soft tones in between the tint and shade.
For example, a monochromatic blue scheme may contain navy, royal blue, sky blue, baby blue, and more. Adjusting lightness & saturation creates a diverse yet cohesive palette.
Analogous Color Combinations
Analogous schemes use 3-5 colors located next to each other on the color wheel like blue, blue-violet, and violet. They bring colors into harmony. Tips:
- Pick a dominant color as the scheme's foundation.
- Select adjacent colors on either side.
- Varied saturation helps differentiate the colors.
- Avoid using tones that are too similar.
This creates comfort while allowing enough contrast between tones. It brings vibrancy through diversity with one dominant color as an anchor.
Triadic Color Schemes
Triadic palettes use 3 colors spaced evenly around the wheel to form a triangle. This creates high contrast through perfectly balanced color distribution. To build triadic harmony:
- Identify the 3 points on an equilateral color triangle.
- Make one color dominant.
- Soften with tints/shades of the 3 colors.
Careful triadic balancing maximizes contrast while preventing colors from clashing.
Tetradic (Double Complementary) Colors
Tetradic schemes have 2 complementary pairs like red & green plus blue & orange. This dynamic combination offers vibrant contrast. Use them harmoniously by:
- Picking 2 color pairs from opposite sides of the wheel.
- Making one color clearly dominant.
- Softening extreme contrast with tints and shades.
With careful modulation of contrast, tetradic schemes make bold statements and rich palettes.
Split Complementary Color Pairings
The split complementary approach uses a color plus the 2 adjacent colors to its complement. This allows more nuance than a single complement pair. To use them effectively:
- Start with a base color.
- Add the 2 neighbors of its complement.
- Subdue contrast through tinting and shading.
With precise color selection, split complementary combinations have character, depth and vibrancy.
Thoughtfully combining complementary colors creates visually engaging schemes with contrast and energy. By carefully considering color relationships and judiciously applying tints, tones and shades, appealing palettes emerge with dynamism, richness, and harmony tailored precisely to your design goals.
Solving Common Color Issues in Tailwind
Tailwind CSS provides a wide range of utility classes for colors that make styling websites fast and intuitive. However, developers may run into issues applying colors properly. This section covers troubleshooting solutions for typical color problems in Tailwind CSS.
Debugging Tailwind Text Color Not Working
If text colors from Tailwind utilities fail to apply properly, there are a few potential causes:
- Specificity issues: Other CSS rules like custom classes may be overriding Tailwind utilities. Use the
!important
suffix or make sure Tailwind utilities are included after other CSS. - Not targeting correct elements: Remember that text color utilities only target text. Applying
.text-blue-500
on adiv
will not change the text color. - Text nested in other elements: If text is wrapped in other nested elements like
span
tags, colors may not cascade correctly. Apply utilities directly onto text elements. - Hard-coded inline styles: Inline styles will override utility classes. Avoid using them directly on text elements.
Ensuring Tailwind Border Color Accuracy
Tailwind has great utilities for borders like .border-red-500
. But border colors can sometimes appear different than expected due to other border styles being applied.
Use the default border width and style for accurate colors:
/* Removes existing border styles */
border-width: 0;
border-style: solid;
/* Applies color utility */
@apply border-blue-500;
Also check for box shadows or background colors altering border colors. Override these with default values if needed.
Handling Background Images Over Tailwind Dynamic Background Colors
Background images may unexpectedly hide underlying background colors from utilities like .bg-gradient-to-r
.
To fix this, set images as background-attachment: fixed
so they do not scroll with content:
.bg-image {
background-image: url('image.jpg');
background-attachment: fixed;
}
This allows the color to show through correctly.
Improving Insufficient Color Contrast
Low color contrast makes text hard to read. Use contrast checking tools to test combinations.
If contrast is insufficient, tweak color shades or switch to entirely different hues until reaching compliance.
Applying Stroke Colors to SVGs
To color SVG icon strokes, use .text-{color}
utilities:
<svg class="text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 21a9..." stroke-width="2"/>
</svg>
This overrides the stroke
attribute to dynamically set the SVG line color.
This covers common color issues like text colors not applying, border colors appearing inaccurate, contrast problems, SVGs lacking color, and more. With these troubleshooting tips in mind, you can confidently style color in websites using Tailwind CSS utilities.
Harnessing Tailwind Colors for Impressive Design
Tailwind CSS provides a wide range of utilities for styling text, backgrounds, borders, and more with colors. This allows developers to quickly build beautiful and accessible user interfaces without needing design skills.
When working with colors in Tailwind, there are a few key things to keep in mind:
Use the Default Color Palette
Tailwind comes with a handpicked color palette that is designed to work well together. Leveraging these default colors for text, backgrounds, hover states etc. is a great way to create stunning designs with minimal effort. Some examples are text-blue-500
, bg-gray-100
, border-indigo-400
etc.
Customize the Palette When Needed
While Tailwind's default colors are great, you may need to use your brand colors or want more control. Tailwind makes it easy to customize the default color palette by editing tailwind.config.js
. You can also generate palettes with tools like Coolors.
Ensure Accessible Color Contrast
When picking text and background color combinations, check that they pass WCAG 2.1 minimum color contrast standards for accessibility. Tools like Contrast Checker can help test this.
Use Color to Draw Attention
Strategically leverage color to highlight important elements on a page like CTAs. Just ensure high contrast backgrounds are used so text remains readable. Gradients can also help make sections stand out.
Test on Real Devices
Colors can appear differently across devices and screens. Be sure to view your Tailwind CSS interfaces on actual phones, tablets, laptops etc. to see how the colors render. Tweak them if needed for optimal visibility.
By thoughtfully using Tailwind's color utilities and customization features, you can design stunning, accessible interfaces without needing advanced design expertise. The defaults make it easy, but you still have full control when needed.