MAD9013

Week 13: Tailwind CSS

Agenda

In-Class Tutorial

Intro to Tailwind CSS

Together we will build a simple bike store page with Tailwind CSS.

Deliverables

In-Class 12

Tailwind CSS Bike Product Page

Let's continue working with Tailwind CSS and build a basic Bike Product Page.

Due: Fri Dec 8, 2023

 Assignment 12

Tailwind CSS Form Page

Using Tailwind CSS re-create the form page from the Bike Club example site and update the colour scheme and font using the Tailwind config.

Due: Sun Dec 10 2023

# Introduction - What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework. That means that the classes and styles it applies each serve their own unique purpose and you apply numerous classes in combination to create the desired styles.

For example, in class we may have created a card pattern by using class names descriptive of the pattern's purpose and we generally only used a few classes. Like the base class and modifiers. Doing so, the html would look something like this:

<a href="#" class="card">
  <img class="card__image" src="..." alt="..." />
  <div class="card__content">
    <h2 class="card__title">...</h2>
    <p class="card__text">...</p>
    <span class="btn">...</span>
  </div>
</a>
1
2
3
4
5
6
7
8

and the css like this:

.card {
  display: flex;
  flex-direction: column;
  box-shadow: 0 0.25rem 0.5rem #000a;
  border-radius: 0.25rem;
  overflow: hidden;
  transition: translate 0.2s;
}

.card:hover,
.card:focus {
  translate: 0 -1.5rem;
}

.card__img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.card__content {
  padding: 1.5rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.card__title {
  text-transform: uppercase;
  font-size: clamp(1.728rem, 4.5vw, 2.369rem);
}

.card__text {
  flex-grow: 1;
}

.btn {
  display: inline-block;
  background-color: var(--color-blue);
  border: 0.125rem solid var(--color-blue);
  color: #fff;
  padding: 0.5em 1.5em;
  border-radius: 0.5rem;
  text-align: center;
}

.btn:hover,
.btn:focus {
  background-color: var(--color-green);
  border-color: var(--color-green);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

The classes you create are designed for a specific purpose and provide some flexibility with modifiers. They implement many styles with a single class. This results in less classes in the html and more writing of unique css rulesets and styles.

Tailwind CSS uses an opposite approach. Instead adding few descriptive class names, you add many reusable utility classes that each implement a specific style (often a single rule) and together they create the design. So instead of adding one class that applies many styles, you add many classes that apply one1 style each. Here is an example of how we would create almost2 the same design as shown above with Tailwind CSS classes.

<a
  class="flex flex-col overflow-hidden rounded shadow transition hover:-translate-y-6 focus:-translate-y-6"
>
  <img class="aspect-video object-cover" src="..." alt="..." />
  <div class="flex flex-grow flex-col p-6">
    <h3 class="text-2xl uppercase">Purple Fixie</h3>
    <p class="flex-grow">
      Some quick example text to build on the card title and make up the bulk of
      the card's content.
    </p>
    <span
      class="inline-block rounded border-[0.125rem] border-blue bg-blue px-[1.5em] py-[0.5em] text-center hover:border-green hover:bg-green focus:border-green focus:bg-green"
    >
      Buy Now
    </span>
  </div>
</a>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

The actual css is then generated by Tailwind CSS and added to the output.css and applied in the browser. Tailwind has a massive library of utility classes that can be used to apply any desired css rule. However, only the classes that you use in your html files get added to the output.css. On save Tailwind scans your code to see what classes are used and includes only those classes, plus some reset styles and other basic supporting styles to the output.css. This keeps your css files smaller while retaining flexibility.

Below we will explore some of the core concepts and utility classes Tailwind provides. This is not a comprehension list, just a simplified review of the core concepts. For a full list, view the Tailwind CSS documentation (opens new window).

1 The number of rules that a utility class applies can vary. Generally the intent is for ach class to a singe, simple, unique purpose, like added display: flex;. Often that purpose can be completed by applying a single rule, however sometimes it requires multiple rules. 2 In my css version, I simplified some of the styles/values. I have applied classes in the Tailwind version that apply similar styles, however would use slightly different, often more complex, values.

# Editor Set-Up

There are two quick things we need to do to get our VSCode working correctly for Tailwind.

# Tailwind CSS IntelliSense

Install the Tailwind CSS IntelliSense VSCode extension. This provides advanced features such as autocomplete, syntax highlighting, and linting.

# Add File Association in Project settings.json

If the file does not already exist in your project folder, make a new folder called .vscode and inside of the folder make a settings.json file. This allows us to set specific editor settings just for this project folder. In that file add the following code to the settings object:

{
  // ... whatever other settings your have ...
  "files.associations": {
    "*.css": "tailwindcss"
  }
}
1
2
3
4
5
6

This adds support for some non-standard css code that we will write, including custom @ rules created by Tailwind CSS. You can also add this globally to your editor settings. However, it has created conflicts for me with other extensions and snippets I use, so I want it only active when using Tailwind.

# Media Queries, :hover, & :focus

By default, any utility class that you add will always apply to your elements. However, we can conditionally apply classes at certain screen sizes or on :hover/:focus, we can add modifiers to the classes. Some examples:

<!--
  This <div> will have a background-color green
  on small screens, blue at the medium media
  query breakpoint, and red at large breakpoint
-->
<div class="bg-green md:bg-blue lg:bg-red">...</div>

<!--
  This <a> will have a text color green
  by default, blue when it is hovered,
  and red when it is focused
-->
<a class="text-green hover:text-blue focus:text-red" href="#">...</a>
1
2
3
4
5
6
7
8
9
10
11
12
13

These modifiers can be applied to any class, not just colors!

# Customize Media Queries

We can customize our media query breakpoints in the tailwind.config.js file. The defaults media queries (opens new window) are px based, so we should update them. Below we replace the default media queries with our own:

module.exports = {
  theme: {
    screens: {
      sm: "25em",
      md: "45em",
      lg: "60em"
    }
  }
};
1
2
3
4
5
6
7
8
9

# Containers

We can size our content with a container class. However default Tailwind container works a bit different from the one made in class. In our version, we set width: min(100%, 65rem); which allows our content to grow until it hits 65rem then it stops growing. The Tailwind version sets a max-width equal to the media query size at each breakpoint as seen below. Meaning instead of slowly growing, the container holds to specific sizes then jumps t the next size as the screen size changes.

/* Outputed container code by Tailwind */
.container {
  width: 100%;
}

@media (min-width: 25em) {
  .container {
    max-width: 25em;
  }
}

@media (min-width: 45em) {
  .container {
    max-width: 45em;
  }
}

@media (min-width: 60em) {
  .container {
    max-width: 60em;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

It also does not add any side padding or center the container by default. We can change that in the tailwind.config.js file by adding the following:

module.exports = {
  theme: {
    container: {
      center: true,
      padding: "1.5rem"
    }
  }
};
1
2
3
4
5
6
7
8

This will change the styles generated by Tailwind:

/* New output container code from Tailwind */
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1.5rem;
  padding-left: 1.5rem;
}

/* ...Plus size updates at each media query... */
1
2
3
4
5
6
7
8
9
10

If we want the container to act more like the container we are used to using, we can combine the container class with a screen size modifier. If we apply lg:container this will only limit the container once it hits our large screen size, which is essentially what our container does. The only side effect of this, is that it will not apply the side padding until the container is apply on large screens. So we would need to manually apply the padding as seen below:

<section>
  <div class="px-6 md:container">
    <!-- ...content... -->
  </div>
</section>
1
2
3
4
5

# Padding & Margin

Tailwind uses the same class structure for padding and margin. The classes have the same structure for both padding and margin: {property}{sides (optional)}-{amount}

Some examples:

  1. pt-1 - This would apply padding-top: 0.25rem;. Padding from p, top from t, and it would apply 0.25rem from 1 which corresponds to a value on the Tailwind CSS default spacing scale (opens new window) table.
  2. my-3 - This would apply margin-top: 0.75rem; and margin-bottom: 0.75rem. Margin from m, top and bottom from y which represents the y-axis, and it would apply 0.75rem from 3 which corresponds to a value on the Tailwind CSS default spacing scale (opens new window) table.
  3. p-6 - This would apply padding: 1.5rem;. Padding from p, no side was specified so it will apply to all sides, and it would apply 1.5rem from 6 which corresponds to a value on the Tailwind CSS default spacing scale (opens new window) table.
  4. mb-[6rem] - This would apply margin-bottom: 6rem;. Margin from m, bottom from b, and it would apply 6rem from [6rem]. By putting a value within square brackets [6rem], you can set a custom value.

# Colors

Colors can be applied to appropriate color properties with different classes.

The default color palette contains a large number of colors each containing 11 shades. If you are using the default color palette, the class has the following structure: {property}-{color}-{shade}. Some examples:

<p class="text-green-500">This text is green</p>
<p class="text-gray-50 bg-gray-950">
  This text is very light gray on a dark gray background
</p>
<div class="border-2 border-green-500 bg-yellow-500">
  This div has a green border and a yellow background
</div>
1
2
3
4
5
6
7

You can set your own custom colors by modifying your tailwind.config.js file.

// This loads the default color palette so colours can be re-added
const colors = require("tailwindcss/colors");

module.exports = {
  theme: {
    colors: {
      primary: {
        // This color has 3 shade options
        light: "#303641", // Shade: bg-primary-light
        DEFAULT: "#23272e", // Default: bg-primary
        dark: "#13161a" // Shade: bg-primary-dark
      },
      red: "#d86972",
      orange: "#bb8b5e",
      green: "#97c278",
      blue: "#387bb2",
      purple: "#c678dd",
      white: "#fff",
      slate: colors.slate, // This re-adds the Slate color and its shades from the default palette
      transparent: "transparent"
    }
  }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

When creating a custom palette, the key name gets used within the generated class. Meaning we now has access to classes like text-red, bg-blue, border-purple, etc.

Learn more about customizing the color palette on the Tailwind CSS Docs (opens new window)

# Typography

We can apply different styles to our Typography through base Tailwind CSS classes.

# Font Family

Tailwind has three font-family options by default:

<p class="font-sans">Sans-serif font applied</p>
<p class="font-serif">Serif font applied</p>
<p class="font-mono">Monospace font applied</p>
1
2
3

You can swap out the font options above with custom fonts by updating your tailwind.config.js file. Here we add a single font to use across our site.

module.exports = {
  theme: {
    fontFamily: {
      body: "Raleway, sans-serif"
    }
  }
};
1
2
3
4
5
6
7

This gives us access to a new font family class for body and removes the three default options.

<p class="font-body">Raleway font applied</p>
1

# Font Size

We can set the font-size with a class following the text-{size} format:

<p class="text-sm">0.875rem</p>
<p class="text-base">1rem</p>
<p class="text-lg">1.125rem</p>
<p class="text-xl">1.25rem</p>
<p class="text-2xl">1.5rem</p>
1
2
3
4
5

The default type scale is quite small. However we can customize the font-sizes by updating the Theme in the tailwind.config.js file.

# Weight & Style

<p class="font-bold">This is bold AKA 700</p>
<p class="font-extrabold">This is extra bold AKA 800</p>
<p class="italic">This is italic</p>
<i class="not-italic">This removed the default italic from the browser</i>
1
2
3
4

# Text Align

<p class="text-left">Left aligned</p>
<p class="text-center">center aligned</p>
<p class="text-right">Right aligned</p>
1
2
3

# More Type Styles

<a class="no-underline" href="#">Text decoration has been removed</a>
<p class="uppercase">This will be all caps</p>
<p class="tracking-widest">This element has a larger letter-spacing applied</p>
1
2
3

# Flex

To apply display: flex; to an element, we use the class flex. We have access to all of the same flex properties through individual classes. The following show a basic flex parent with align-items: center;, gap: 1.6rem, and flex-wrap: wrap;.

<div class="flex items-center gap-6 flex-wrap">
  <div class="grow">This one gets `flex-grow`</div>
  <div class="grow-0">This one doesn't</div>
</div>
1
2
3
4

# Grid

To apply display: grid; to an element, we use the class grid. We can set the number of columns with a class grid-cols-{# of columns}. We can combine it with the media queries to make a responsive layout. The example below is a 1 column grid on small screens, 2 column on medium, and 4 columns on large.

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div class="col-span-full">Spans all columns</div>
</div>
1
2
3
4
5
6
7

We can also set the grid-column value with col-span-{# of columns} to have elements span multiple columns. In the example above, we used col-span-full which applies grid-column: 1 / -1; to span all columns.

# Review the Tailwind CSS Documentation

The key when working with a framework like this is to always have the documentation open (opens new window) and ready to review. For the most part, the editor tools will give you guidance on what class names do. However, there will always be times you are unsure how to properly apply a class or how to customize it. So it is important to always have the docs open in your browser ready for reference. You are not expected to memorize it all, just have the tools ready and be willing to use them!

# To Do Before Week 14

Self-Directed To Do

Work on your Project 2 - Portfolio Website.

Last Updated: 11/26/2023, 11:14:34 AM

← Week 14: Key Concept Review →