DEV Community: Amin Raeisi

Colors in Tailwind CSS

Amin Raeisi — Wed, 30 Nov 2022 15:00:00 +0000

Tailwind CSS has its own color system. At the time of writing this article, Tailwind CSS provides 22 color names, each with 10 different shades. Shade number 50 is the lightest and shade number 900 is the darkest shade of each color. So a total of 220 “expertly-crafted” colors to choose from. We can apply colors to text, backgrounds, borders, shadows, and more.

Tailwind CSS provides utility classes for colors. The naming convention for these classes is simple and easy to remember.

For example, if we want to set the text color of an element to red with the shade of 500, the class to add to the element will be text-red-500. If we want to set the background color of an element to green with the shade of 300, the class to add will be bg-green-300.

<p class="text-red-500">...</p>

<div class="bg-green-300">...</div>

We also have the colors black and white which we use without a shade number (e.g., text-black or bg-white).

Tailwind CSS Text Color

As I mentioned, the class naming convention for changing the text color is:

text-{color name}-{shade}

Let's go to the Tailwind Play website and try it there. Remove all the code in the editor section so that we get a blank screen.

Add the following 3 paragraph elements to the page. Notice that I have a random text in each one. You can insert random text by typing "lorem" and then hitting the TAB key.

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat culpa alias atque est vel iusto aliquid, suscipit quos nobis laboriosam impedit quam ipsum fugit quisquam vitae nostrum, hic deserunt modi!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat minima deleniti eaque voluptatibus? Deserunt aperiam officiis architecto atque omnis eius commodi dolorem, iusto, autem maiores in numquam, tempore consequuntur. Odit!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus error optio veniam cumque veritatis dolore perspiciatis deleniti consectetur adipisci eligendi dignissimos, doloribus vero totam nisi repellendus quisquam. Nam, corrupti nostrum.</p>

Check the result, and we can see that we do not have any styles applied to the paragraphs yet.

if we add the class text-red-500 to the first paragraph, we can see that the color changes to red.

<p class="text-red-500">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat culpa alias atque est vel iusto aliquid, suscipit quos nobis laboriosam impedit quam ipsum fugit quisquam vitae nostrum, hic deserunt modi!</p>

Add the classes text-green-800 and text-green-300 to the second and third paragraphs and check the result. Here is how our code looks like now:

<p class="text-red-500">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat culpa alias atque est vel iusto aliquid, suscipit quos nobis laboriosam impedit quam ipsum fugit quisquam vitae nostrum, hic deserunt modi!</p>
<p class="text-green-800">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat minima deleniti eaque voluptatibus? Deserunt aperiam officiis architecto atque omnis eius commodi dolorem, iusto, autem maiores in numquam, tempore consequuntur. Odit!</p>
<p class="text-green-300">Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus error optio veniam cumque veritatis dolore perspiciatis deleniti consectetur adipisci eligendi dignissimos, doloribus vero totam nisi repellendus quisquam. Nam, corrupti nostrum.</p>

Tailwind CSS Background Color

The class naming convention for changing the background color is:

bg-{color name}-{shade}

Let's give each of our paragraphs different background colors:

<p class="text-red-500 bg-gray-900">...</p>
<p class="text-green-800 bg-green-50">...</p>
<p class="text-green-300 bg-yellow-900">...</p>

Check the result, and we can see that the background colors have changed.

Easy, right? Tailwind CSS provides a similar naming convention for other color utility classes. I will cover those in the coming posts where we need to use them.

Customizing Colors in Tailwind CSS

Before we add custom colors, I need to show you how CSS colors work. In the preview section, right click on the first paragraph and select Inspect.

This will open the Chrome DevTools. On the left side, make sure that the first <p> element is selected. On the right side under the Styles tab, look for the .text-red-500 and .bg-gray-900 classes.

You can see that the easy-to-remember class names are setting the colors in a way that the browser understands. in both text-red-500 and bg-gray-900 classes, the value of the color is applied using the rgb() color value. The RGB color value is one of the many ways that we define colors in CSS. Some of the popular ways are:

Hexadecimal: starts with # and has different length (e.g., white is #FFF or #FFFFFF and black is #000 or #000000)
RGB: represents RED, GREEN, and BLUE color values. Each color value is between 0 and 255 where 255 has the most intensity (e.g., white is rgb(255,255,255) and black is rgb(0,0,0))
RGBA: similar to RGB but with one more value at the end which is for the opacity and it is between 0 and 1 (e.g., rgba(255,0,0,0.5) is color red at 50% opacity)

As I mentioned before, Tailwind CSS has more than 220 color shades. But if you want to pick a color of your choice, Tailwind CSS provides a few different ways to do that.

Arbitrary Values

If you want to use a custom color in a few places, you can use arbitrary values. The naming convention for color classes with arbitrary values is not that different. Instead of the color and shade names, we write the CSS color value wrapped with square brackets [].

Here are a few examples:

/* change background color to #ff7947 */
bg-[#ff7947]
/* change background color to rgb(255, 99, 71) */
bg-[rgb(255,99,71)]
/* change text color to #ff7947 */
text-[#ff7947]
/* change text color to rgb(255, 99, 71) */
text-[rgb(255,99,71)]

Let's add two more paragraphs, one with text color #ff7947 and the other one with a background color of rgb(255,99,71).

<p class="text-[#ff7947]">Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore ut itaque deserunt voluptatibus nisi quo in modi nemo ducimus culpa, corporis ipsa quisquam? Numquam ad porro rerum ipsam atque necessitatibus.</p>
<p class="bg-[rgb(255,99,71)]">Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias consequatur commodi veritatis dignissimos explicabo enim error voluptatum corrupti, aspernatur optio voluptatem eveniet beatae esse expedita et ad. Laborum, natus ratione?</p>

Check the result and we can see that both colors are applied.

Adding Additional Colors

Tailwind CSS allows us to extend the default color palette. We can add new colors or even add colors with different shades. As you already know, Tailwind CSS has a config file called tailwind.config.js. Tailwind Play has the config file under the Config tab.

First, we need to add a new object called colors within the extend object.

Any key: value pair we add inside the colors object represents a color. Let's add a new color called sea with the value #2D7AFF. We need to add the value as a string (wrapped with ' or ").

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      colors: {
        sea: '#2D7AFF',
      },
    },
  },
  plugins: [],
}

So now the new color sea can be applied to our pages. If we want it for text color, we use text-sea, or if we want it for background color, we use bg-sea class. Let's change the last paragraph's text color to the color sea.

<p class="text-red-500 bg-gray-900">...</p>
<p class="text-green-800 bg-green-50">...</p>
<p class="text-green-300 bg-yellow-900">...</p>
<p class="text-[#ff7947]">...</p>
<p class="bg-[rgb(255,99,71)] text-sea">...</p>

Adding Colors With Shades

We can also add custom colors with different shades like Tailwind CSS colors. We can do that by setting the value of the color key as an object that has key: value pairs. Each of those key: value pairs will represent a color shade.

Let's say we want to add a new color called warm and it has 3 different shades. The color values for the 3 shades are #FF0000, #B80000, and #6D0000.

We can name each shade anything we like. We can name them like Tailwind CSS (numbers between 50 and 900) or we can name them with words. Let's go with the second option and name them lightest, normal, and darkest.

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      colors: {
        sea: '#2D7AFF',
        warm: {
          lightest: '#FF0000',
          normal: '#B80000',
          darkest: '#6D0000',
        },
      },
    },
  },
  plugins: [],
}

Now that the color warm has been added, let's use it as the background color of the fourth paragraph.

<p class="text-red-500 bg-gray-900">...</p>
<p class="text-green-800 bg-green-50">...</p>
<p class="text-green-300 bg-yellow-900">...</p>
<p class="text-[#ff7947] bg-warm-darkest">...</p>
<p class="bg-[rgb(255,99,71)] text-sea">...</p>

Check the result and we can see that the background color is changed.

How to Install Tailwind CSS: Explained!

Amin Raeisi — Thu, 01 Sep 2022 03:55:18 +0000

This post is the beginner's guide on how to install Tailwind CSS using the Tailwind CLI. There are many ways you can install Tailwind CSS and it all depends on what kind of project you are working on.

Before we get started, there are a few points you might need to know:

If you want to try Tailwind CSS, Tailwind Play and Play CDN are the quickest way you can get your hands dirty
When installing Tailwind CSS on a framework, there might be some differences. Check the framework guides section to find the installation for your framework.
TLDR: https://tailwindcss.com/docs/installation ¯\_(ツ)_/¯

Install Tailwind CSS using Tailwind CLI

The first thing we need is npm. NPM is a package manager for JavaScript. Think about a package manager as a way you can manage other people's code inside your project. The reason we need it is to be able to use the tailwindcss package in our project.

Install Node.js and npm

To have npm, we need to install it through installing Node.js. First, we need to check if we have Node.js and npm installed. Open the command prompt (or PowerShell/Terminal/etc.), and enter the following:

node -v

If the system shows you the version number for node, then you already have node installed. You can do the same to verify npm installation:

npm -v

If you don't get the version number for node and npm, then you need to install Node.js. Go to nodejs.org and depending on your Operating System, install the LTS version.

Create the Project Directory

Inside the desktop, create a folder called website. Inside the website folder, create a folder called src which we will use to store our website files.

Install `tailwindcss` package

Using the command prompt, go to the project directory (website folder). In my case I will enter cd .\Desktop\website:

Enter the following to install the tailwindcss package:

npm install -D tailwindcss

The first two words npm install will use npm to install a package. The flag -D tells npm to only install the package in development and not in production. The last part tailwindcss is the package name.

If we open the project folder in VS Code, there is a new folder called node_modules. node_modules folder is where all the external packages will be saved. If we look into the folder, we can see that there is a tailwindcss folder that contains the tailwindcss code. The good news is that we do not change anything in this folder and all changes happen with npm commands.

The files package.json and package-lock.json are also created. package.json file contains information about the project with the packages it uses. package-lock.json contains the packages with the exact version numbers installed.

Tailwind CSS Config File

Next, create a Tailwind CSS config file using the following command:

npx tailwindcss init

npx is similar to npm but we use it to execute packages. The command we ran, created a new config file called tailwind.config.js. The config file contains a boilerplate of the Tailwind CSS configuration. Inside the config file, we have a JavaScript object with a few properties.

We can configure a lot of things with the config file. For now, the only important part of the config file is the content property. The content property is the way to tell tailwindcss what files to look for when it wants to build our CSS file.

So in our case, we want tailwindcss to scan all .html files inside the src folder. The syntax for that will be the string "./src/**/*.html". Let's break down the path so that you know what is going on here:

.: Start from the current path/folder (the root of the project)
/src: Look inside the src/ folder
/**/: Look within all subfolders within the parent folder (src/)
*.html: The files we want are files with any name (*) but with .html file extension only.

So here is the final code of our config file:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.html"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Tailwind CSS directives

Directives are different parts of Tailwind CSS. We can also register new directives with the use of plugins. Three main directives are:

base: Injects Tailwind CSS base styles and registered plugins' styles
components: Injects Tailwind CSS component classes and registered plugins' component classes
utilities: Injects Tailwind CSS utility classes and registered plugins' utility classes

Inside the src/ folder, create a file called style.css. The name of the file does not matter. Tailwind CSS uses this file as input to build the actual CSS file that contains the CSS styles we need.

Inside the style.css file, add the Tailwind CSS directives:

@tailwind base;
@tailwind components;
@tailwind utilities;

Building The CSS File

Using the command prompt enter the following:

npx tailwindcss -i ./src/style.css -o ./src/css/main.css

Let's break it down:

npx tailwindcss: Executes the build command
-i ./src/style.css: The flag -i tells the tailwindcss package what is the input file (./src/style.css)
-o ./src/css/main.css: The flag -o tells the tailwindcss package what is the output file (./src/css/main.css)

Check the project files and we can see that our main.css file got built. This is the file that we will import into our HTML file. Right now, the main.css only contains the base styles. This is because we do not have any HTML page for Tailwind to scan and add the used component or utility classes.

Use the Tailwind CSS Output File in HTML

Inside the src/ folder, create a file called index.html. Import the main.css file and add a simple button with some Tailwind CSS classes to test:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Tailwind CSS</title>
    <link rel="stylesheet" href="css/main.css">
  </head>
<body>
  <button class="text-lg text-red-500 bg-red-200">CodeProMax</button>
</body>
</html>

Save the file and check the result. If you have the live server extension installed like me, you can open the file with the live server.

The button did not get any of the styles we applied to. If we check the main.css file, we can see that it does not contain the utility classes we applied to the button. This is because every time we make a change to the classes, Tailwind CSS needs to build the main.css file with the latest update.

To understand the process better, here is how Tailwind CSS works:

To generate the classes we need to run the build command again:

npx tailwindcss -i ./src/style.css -o ./src/css/main.css

If we check the page now, we can see that our button has got the styles applied to:

Running the same build command for every change is not a good flow. We can automate that by adding the --watch flag to the build command. So here is the build command with the watch flag:

npx tailwindcss -i ./src/style.css -o ./src/css/main.css --watch

You can notice that the command prompt did not finish or stop and it is still active. The watch flag keeps the command prompt active and "watches" the files for any change. Once it detects a change, it will run the build command automatically.

While the command prompt is still active, let's add a new class font-extrabold to the button:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Tailwind CSS</title>
    <link rel="stylesheet" href="css/main.css">
  </head>
<body>
  <button class="text-lg text-red-500 bg-red-200 font-extrabold">CodeProMax</button>
</body>
</html>

Save the file, refresh, and we can see the new changes.

If you check the mian.css file, we can see that the class font-extrabold is now added to the file.

Tailwind CSS Flow

The things we covered in this post are not your everyday flow using Tailwind CSS. Most of the time you run the build command with the watch flag, and continue working on your project.

Prerequisites for Learning Tailwind CSS

Amin Raeisi — Tue, 30 Aug 2022 04:42:45 +0000

In this article, we will go through the minimum CSS knowledge you need to know before starting with Tailwind CSS. I assume that you already know the basics of HTML. But if you don't, I have written a blog series covering that here.

What Is CSS?

CSS stands for Cascading Style Sheets. CSS is not a programming language. CSS applies the style to the HTML elements and changes the way they look on the screen.

CSS Syntax

Here is an example of a CSS syntax:

h1{
  color: red;
  font-size: 16px;
}

So let's break it down to understand it better. We have the h1 which is the selector. The selector points to the element we want to style, in this case, all the h1 elements. Each line within the curly braces {} contains a declaration (each declaration contains property: value;). The first declaration has the property color set to value red. The second declaration has the property font-size set to value 16px. The semicolon ; comes at the end of each of the declarations.

With the CSS code above, all the <h1> elements within the page will get the text color of red and the font size of 16 pixels.

How to Use CSS?

Let's create a folder called "website" on the desktop and open that with your text editor. Inside the folder, create a file called index.html.

Add the following code to the index.html page:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Zero CSS to Tailwind CSS</title>
  </head>
  <body>

  </body>
</html>

We can add CSS to our page in three ways:

Inline CSS

In this method, we set the value of the style attribute on an element to the CSS declarations we want.

<h1 style="color:red;">Code Pro Max</h1>

Insert the above <h1> element inside the <body> of the page and check the result.

It is not recommended to use inline CSS because you need to specify all the styles needed for every single element and there is no reusability of your code.

Internal CSS

We can insert an internal CSS inside the head element of our page. We wrap the CSS code with a <style> tag. Let's add a paragraph to the page and apply a style to it using the internal CSS.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Zero CSS to Tailwind CSS</title>
    <style>
      p{
        color: green;
      }
    </style>
  </head>
  <body>
    <h1 style="color:red;">Code Pro Max</h1>
    <p>This is the main website for Code Pro Max.</p>
  </body>
</html>

You can see that the internal CSS syntax is a bit different and that is because the CSS declarations applied needs a selector to point to an element. The first part of the syntax (p) points to all <p> elements within the page. Then all the CSS declarations we have within the curly braces {} will get applied to the <p> elements.

The limitation of this method is that, you have to recreate the <style> section for every single page you have to reuse the styles on other pages.

External CSS

The external CSS method is similar to the internal styles but with the difference of the styles are written in a separate .css file so that it is easier to reuse the styles on any page you need.

Add the following after the <p> element in our index.html file:

<h2>Blog Posts</h2>
<h3>Recent Blog Posts</h3>

Create a file called style.css and write the following code:

h2{
    color: blue;
}
h3{
    font-size: 50px;
}

The CSS style we have written sets all the <h2> tag's text color to blue and applies a font size of 50 pixels to all <h3> elements.

But how can we tell the html page about this external CSS file? We do that by adding a <link> element inside the <head> section of our HTML page.

<link rel="stylesheet" href="style.css">

The rel attribute specifies the relationship between the index.html file and the linked document (style.css) and we set it to stylesheet. The href attribute points to the location of the linked document.

Check the result and we can see that the external CSS file styles have been applied.

The good thing about the external CSS method is that if we add another page and we want the same styles to be applied to our <h2> and <h3> tags, we only need to import the style.css file in that page.

Tailwind CSS uses an external CSS file that contains all the CSS classes we can apply to elements on our pages.

Chrome Developer Tools (DevTools)

Let's use Chrome Developer Tools (DevTools) to inspect the styles applied to our page. We can use Chrome DevTools to inspect the CSS applied to the elements on the page. Right click on the page and select Inspect. If it opens on the right side, click the "three dots icon" on the top right corner and change the "Dock side" to the bottom.

Under the "Elements" tab, click on any element and that will show the styles applied to the element on the right side under the styles tab.

If you want to debug your page or something is not working as expected, Chrome DevTools will help you to find the issue faster.

CSS Selectors

So far we only covered one type of selector and that is selecting an element based on the element's tag name but we can use other ways as well.

Type Selector

We have used type selectors in our examples. We write the element's tag name as the selector. This example will change all the <h1> elements' font size to 40 pixels:

h1{
  font-size: 40px;
}

Save the file and check the result.

We notice from the Chrome DevTools that both the inline CSS and the external CSS styles have been applied to our <h1> tag. We can also see the file name style.css that the CSS is coming from. Chrome DevTools allows us to modify the styles applied and try different styles before we actually add them to our code.

A type selector is useful if we want to apply the same style to all the elements of one type. But let's say we have two <h1> elements and we want to set the font size of one of them to 40 pixels and the other one to 20 pixels.

Add the following <h1> tag under the one we have now.

<h1>Never Stop Learning</h1>

Save the file and check the result.

You can see that the font size 40px got applied to both of the <h1> tags but we only want that for the first h1 and for the second h1 we want the font size to be 20px. We need another way to target a specific element and apply styles to it.

ID Selector

We can set a unique id attribute on an element and then apply CSS to it using the id selector. To make the browser know that this is an id selector and not a type selector, we prefix the id with a # sign. So first, let's add two different ids to our h1 elements.

<h1 id="mainHeading" style="color:red;">Code Pro Max</h1>
<h1 id="subHeading">Never Stop Learning</h1>

Now that each of the h1 elements has an id attribute, we can target the first one by setting the selector to #mainHeading and the second by setting the selector to #subHeading. I have removed the previous h1 selector since now we have an id selector for it.

#mainHeading{
  font-size: 40px;
}
#subHeading{
  font-size: 20px;
}

save the file and check the result.

You can see that each of the h1 elements got its own styles with the id selector.

The id selector solves the problem with the type selectors but what if we have a page with 5 different types of <p> tags and we want to show two of them in red, two of them in orange, and the other one in blue? If we want to use the id selector, we will repeat ourselves.

Inside the index.html file, after the h3 element, add the following paragraphs.

<p id="paragraph-red-1">First paragraph</p>
<p id="paragraph-red-2">Second paragraph</p>
<p id="paragraph-orange-1">Third paragraph</p>
<p id="paragraph-orange-2">Forth paragraph</p>
<p id="paragraph-blue">Fifth paragraph</p>

And for the CSS we will need to add the following to target each paragraph and set their color:

#paragraph-red-1{
  color: red;
}
#paragraph-red-2{
  color: red;
}
#paragraph-orange-1{
  color: orange;
}
#paragraph-orange-2{
  color: orange;
}
#paragraph-blue{
  color: blue;
}

We got it working but we have the same color: red; or color: orange applied multiple times. If we have 20 more paragraphs to show in red, we have to create 20 more styles in our CSS file to target them. The reason for repeating the same styles is that we cannot have the same id attribute for another element. The id attribute's value must be unique on each page. This is where the class selector can be helpful.

Class Selector

We use the class selectors if we have multiple elements that are using the same styles. In the last example, we had multiple paragraphs that use the same color. In order to use the class selector, we first need to add a class attribute to our element. I will first delete all the ids on the paragraphs and then add a class to them.

<p class="text-red">First paragraph</p>
<p class="text-red">Second paragraph</p>
<p class="text-orange">Third paragraph</p>
<p class="text-orange">Forth paragraph</p>
<p class="text-blue">Fifth paragraph</p>

The class attribute's value can be the same on multiple elements. In our CSS, delete the previous styles and add the following styles with the class selector. In order to tell the browser that we are targeting an element's class, we need to prefix the class name with a dot "." in our CSS file.

.text-red{
  color: red;
}
.text-orange{
  color: orange;
}
.text-blue{
  color: blue;
}

Save the file and check the result

The result is the same but now we have fewer lines of CSS and we can add the classes text-red, text-orange, or text-blue to any other elements and change their text color. Another advantage of using class selectors is that we can add multiple classes to an element separated by a space and that will apply all of the styles to the element.

Let's add the following classes at the end of the style.css file:

.text-small{
  font-size: 20px
}
.text-medium{
  font-size: 40px
}
.text-large{
  font-size: 60px
}

Add the second class to any of the paragraphs separated by space to change the font size on them.

<p class="text-red text-large">First paragraph</p>
<p class="text-red text-medium">Second paragraph</p>
<p class="text-orange text-small">Third paragraph</p>
<p class="text-orange text-large">Forth paragraph</p>
<p class="text-blue text-small">Fifth paragraph</p>

And that will apply both styles to our paragraphs.

Tailwind CSS works with classes and we apply those classes to our elements using the class attribute.

There are other selectors that we can use but these were the important ones and for Tailwind CSS, most of the time we are using classes. You can check this link or this one for more information on CSS selectors.

CSS Comments

You can also add comments to your CSS. This is useful if you want to explain the CSS you have written. A comment will only be visible in your code and it will not display in the browser or affect a page's layout. A CSS comment starts with /* and ends with */:

/* This text will not show in the browser or affect the layout of the page */

/* We can have
multiline
comments
*/

/*
CSS styles in the comments will not be applied
.text-very-large{
  font-size: 100px;
}
*/

CSS Properties List

In the examples we covered so far, we only had two basic CSS properties color and font-size but there are a lot of properties we can use. You can head over to w3schools.com/cssref and check all of the CSS properties available with code examples. The reason I didn't cover those is that Tailwind CSS uses them in a different way. We use Tailwind CSS classes to apply styles to our elements.

What's next?

Now that you know how CSS works, you can move to install Tailwind CSS and start learning about the CSS classes it provides.