Make the Slack Logo with Tailwind CSS
Make the Slack Logo with Tailwind CSS
This tutorial is part of our Learn Tailwind CSS Guide

Make the Slack Logo with Tailwind CSS

Chris Sev's Profile
Chris Sevon Jun 23, 2021

Use Tailwind's CSS grid classes to quickly create the Slack logo.

Tailwind CSS's grid classes are fantastic. The CSS grid syntax by itself is not the most succinct so I had doubts when Tailwind added grid classes. They knocked it out of the park though. Tailwind's grid classes are very nice to use.

This CSS Grid tutorial will be a great intro at seeing how Tailwind handles CSS Grid. I also did a video on Tailwind's grid classes if you want to check out those classes.

Let's take a look at the Slack logo:

Slack Logo

If we look at this in terms of boxes and grid, we can see this creates a 4x4 grid:

Slack Logo in a 4x4 grid

Let's create a new CodePen and make sure we add Tailwind under the CSS settings.

Adding Tailwind to CodePen

We'll add our HTML code for a little styling and to create the logo container (no grid work just yet):

html<div class="min-h-screen flex flex-col items-center justify-center bg-pink-400">

  <!-- white circle -->
  <div
    class="flex items-center justify-center bg-white rounded-full shadow-xl h-64 w-64 p-10"
  >
    content goes here
  </div>
</div>
<div class="min-h-screen flex flex-col items-center justify-center bg-pink-400">
  <!-- white circle -->
  <div class="flex items-center justify-center bg-white rounded-full shadow-xl h-64 w-64 p-10">
    content goes here
  </div>
</div>

We've created the overall page and the white circle background. We haven't done anything with Tailwind's CSS Grid yet.

Now that we have our overall template, let's add our grid with grid elements. We'll apply colors to the grid elements. Looking at the Slack logo, we'll need:

  • 2 blues
  • 2 greens
  • 2 reds
  • 2 oranges (we'll use Tailwind's yellow since there's no orange by default)
html<div class="grid grid-cols-4 grid-rows-4 gap-2 w-full h-full">
  <!-- blues -->
  <div class="rounded-full bg-blue-400"></div>
  <div class="rounded-full bg-blue-400"></div>

  <!-- greens -->
  <div class="rounded-full bg-green-400"></div>
  <div class="rounded-full bg-green-400"></div>

  <!-- reds -->
  <div class="rounded-full bg-red-600"></div>
  <div class="rounded-full bg-red-600"></div>

  <!-- yellows -->
  <div class="rounded-full bg-yellow-500"></div>
  <div class="rounded-full bg-yellow-500"></div>
</div>
<div class="min-h-screen flex flex-col items-center justify-center bg-pink-400">
  <div class="flex items-center justify-center bg-white rounded-full shadow-xl h-64 w-64 p-10">
    <div class="grid grid-cols-4 grid-rows-4 gap-2 w-full h-full">
      <!-- blues -->
      <div class="rounded-full bg-blue-400"></div>
      <div class="rounded-full bg-blue-400"></div>
      <!-- greens -->
      <div class="rounded-full bg-green-400"></div>
      <div class="rounded-full bg-green-400"></div>
      <!-- reds -->
      <div class="rounded-full bg-red-600"></div>
      <div class="rounded-full bg-red-600"></div>
      <!-- yellows -->
      <div class="rounded-full bg-yellow-500"></div>
      <div class="rounded-full bg-yellow-500"></div>
    </div>
  </div>
</div>

We've used the rounded-full class and the bg-[color]-[number] classes to add in our Slack logo sections.

CSS Grid allows us to specifically pick the column and row an element starts in. This is how we can specifically place each element to match Slack's logo. We will use the starting and ending lines classes like col-start-3 or row-start-2.

We can also control how many columns or rows an element will spread across by using the spanning columns and spanning rows classes like col-span-2 and row-span-3.

html<div class="grid grid-cols-4 grid-rows-4 gap-2 w-full h-full">
  <!-- blues -->
  <div class="col-start-2 rounded-full bg-blue-400"></div>
  <div class="col-start-1 row-start-2 col-span-2 rounded-full bg-blue-400"></div>

  <!-- greens -->
  <div class="col-start-3 row-span-2 rounded-full bg-green-400"></div>
  <div class="col-start-4 row-start-2 rounded-full bg-green-400"></div>

  <!-- reds -->
  <div class="col-start-1 row-start-3 rounded-full bg-red-600"></div>
  <div class="row-span-2 rounded-full bg-red-600"></div>

  <!-- yellows -->
  <div class="col-span-2 rounded-full bg-yellow-500"></div>
  <div class="col-start-3 rounded-full bg-yellow-500"></div>
</div>
<div class="min-h-screen flex flex-col items-center justify-center bg-pink-400">
  <div class="flex items-center justify-center bg-white rounded-full shadow-xl h-64 w-64 p-10">
    <div class="grid grid-cols-4 grid-rows-4 gap-2 w-full h-full">
      <!-- blues -->
      <div class="col-start-2 rounded-full bg-blue-400"></div>
      <div class="col-start-1 row-start-2 col-span-2 rounded-full bg-blue-400"></div>
      <!-- greens -->
      <div class="col-start-3 row-span-2 rounded-full bg-green-400"></div>
      <div class="col-start-4 row-start-2 rounded-full bg-green-400"></div>
      <!-- reds -->
      <div class="col-start-1 row-start-3 rounded-full bg-red-600"></div>
      <div class="row-span-2 rounded-full bg-red-600"></div>
      <!-- yellows -->
      <div class="col-span-2 rounded-full bg-yellow-500"></div>
      <div class="col-start-3 rounded-full bg-yellow-500"></div>
    </div>
  </div>
</div>

The last part to this is to use Tailwind to stop rounding one of the four corners of the longer elements. This will give that Slack type pointy thing. We can use the border radius classes like rounded-tl-none and rounded-bl-none.

html<div class="min-h-screen flex flex-col items-center justify-center bg-pink-400">

  <!-- white circle -->
  <div class="flex items-center justify-center bg-white rounded-full shadow-xl h-64 w-64 p-10">

    <!-- uses a 4x4 grid -->
    <div class="grid grid-cols-4 grid-rows-4 gap-2 w-full h-full">

      <!-- blues -->
      <div class="col-start-2 rounded-full bg-blue-400 rounded-br-none"></div>
      <div class="col-start-1 row-start-2 col-span-2 rounded-full bg-blue-400"></div>

      <!-- greens -->
      <div class="col-start-3 row-span-2 rounded-full bg-green-400"></div>
      <div class="col-start-4 row-start-2 rounded-full bg-green-400 rounded-bl-none"></div>

      <!-- reds -->
      <div class="col-start-1 row-start-3 rounded-full bg-red-600 rounded-tr-none"></div>
      <div class="row-span-2 rounded-full bg-red-600"></div>

      <!-- oranges -->
      <div class="col-span-2 rounded-full bg-yellow-500"></div>
      <div class="col-start-3 rounded-full bg-yellow-500 rounded-tl-none"></div>
    </div>

  </div>
</div>
<div class="min-h-screen flex flex-col items-center justify-center bg-pink-400">
  <!-- white circle -->
  <div class="flex items-center justify-center bg-white rounded-full shadow-xl h-64 w-64 p-10">
    <!-- uses a 4x4 grid -->
    <div class="grid grid-cols-4 grid-rows-4 gap-2 w-full h-full">
      <!-- blues -->
      <div class="col-start-2 rounded-full bg-blue-400 rounded-br-none"></div>
      <div class="col-start-1 row-start-2 col-span-2 rounded-full bg-blue-400"></div>
      <!-- greens -->
      <div class="col-start-3 row-span-2 rounded-full bg-green-400"></div>
      <div class="col-start-4 row-start-2 rounded-full bg-green-400 rounded-bl-none"></div>
      <!-- reds -->
      <div class="col-start-1 row-start-3 rounded-full bg-red-600 rounded-tr-none"></div>
      <div class="row-span-2 rounded-full bg-red-600"></div>
      <!-- oranges -->
      <div class="col-span-2 rounded-full bg-yellow-500"></div>
      <div class="col-start-3 rounded-full bg-yellow-500 rounded-tl-none"></div>
    </div>
  </div>
</div>

Using Tailwind's CSS Grid classes, we can quickly create some really fun things.

If you enjoyed this tutorial, We also have a Getting Started with Tailwind course.

Chris Sev

Chris Sev

Chris Sev is the co-founder of Better Dev. Coding better every day. Previously he created Scotch.io which was acquired.

Comments

What did you think of the article? Let us know!
(these comments are powered by GitHub issues and use 0 trackers)