Tailwind

Mix.install([
  {:kino, github: "livebook-dev/kino", override: true},
  {:kino_lab, "~> 0.1.0-dev", github: "jonatanklosko/kino_lab"},
  {:vega_lite, "~> 0.1.4"},
  {:kino_vega_lite, "~> 0.1.1"},
  {:benchee, "~> 0.1"},
  {:ecto, "~> 3.7"},
  {:math, "~> 0.7.0"},
  {:faker, "~> 0.17.0"},
  {:utils, path: "utils"},
  {:httpoison, "~> 1.8"},
  {:poison, "~> 5.0"}
])

Navigation

Return Home Report An Issue

Setup

Ensure you type the ea keyboard shortcut to evaluate all Elixir cells before starting. Alternatively, you can evaluate the Elixir cells as you read.

Overview

Tailwind is a CSS utility framework. It allows us to use utility classes defined by Tailwind to conveniently apply css styles.

For example, we can use the underline class to apply an underline to an HTML element.

  Hello world!

This applies the following CSS to the heading 3 element.

text-decoration-line: underline;

Keep in mind, there is nothing we can do in Tailwind that we cannot do with pure CSS. Tailwind is purely for convenience. In general, you’ll want to learn CSS styles, then learn the appropriate CSS class on Tailwind. Knowledge of pure CSS will always be more generally applicable than knowledge of Tailwind.

However, Tailwind is a very popular and important CSS framework in the Elixir ecosystem. Many projects use Tailwind, and it’s become part of the standard PETAL [Phoenix, Elixir Tailwind, AlpineJS and LiveView] stack, which is a set of common tools used to create Elixir web applications.

Play CDN

To experiment with Tailwind, we can use the Tailwind CDN (Content Delivery Network) in an HTML file. This CDN provides the JavaScript necessary to run Tailwind.

  
  
  


  

    Hello world!
  

Tailwind Play

Alternatively, we can use the Tailwind Play playground to experiment with Tailwind classes.

For example, go to Tailwind Play and enter the following html to create an HTML heading 3 element with bold font, an underline, and a triple extra large font size.

  Hello world!

This is the same as applying the following CSS styles.

h1 {
  // underline
  text-decoration-line: underline;

  // font-bold
  font-weight: 700;

  // text-3xl
  font-size: 1.875rem; /* 30px */
  line-height: 2.25rem; /* 36px */
}

We’re going to use Tailwind Play instead of a local HTML file for the sake of this lesson.

Documentation

We can find all available Tailwind utility classes pm the Tailwind Documentation. They have a handy Quick Search for finding Tailwind classes.

Your Turn (BONUS)

Use the Tailwind Documentation and the Tailwind Play playground to create the following button. This is a challenge of your resourcefulness at reading documentation and problem solving.

If you can’t figure it out, don’t worry, and don’t spend too much time on this. Hopefully it will become clear after the rest of the lesson.

Background

We’re able to set the background color using the bg-{color}-{shade} class.

Tailwind comes with a default color palette. Each color has a base name such as red then a number to indicate the shade of color.

The default colors are slate, gray, zinc, neutral, stone, red, orange, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, and rose.

The default shades are 50, 100, 200, 300, 400, 500, 600, 700, 800, and 900.

So we can apply a background color to an HTML element like so.

Try using the bg-{color}-{shade} utility class in the Tailwind Play playground.

Text

Font Size

We’ve already seen we can change font size using text-{size} utilities.

We have access to the following sizes: xs, sm, base, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl, 8xl, and 9xl.

With Tailwind,

, h1, h2, h3, h4, h5, and h6 are purely semantic and do not apply any styles by default.

Try putting the following HTML into the Tailwind Playground and notice there is no difference between each element.

paragraph
h1
h2
h3
h4
h5
h6

Font Weight

font-{weight} sets the font weight of text. The weight can be thin, extralight, light, normal, medium, semibold, bold, extrabold, and black.

100
200
300
400
500
600
700
800
900

Text Color

We can use text-{color} with the default color palette to set the color of the text.

red text

Text Align

We can use text-left, text-center, and text-right as well as other text-align classes to align text inside its container.

centered text

Height and Width

We can set height and width using the h-{size} and w-{size} classes. Refer to the Height and Width documentation for more.

Fixed

We can provide a fixed-size for the height and width of 0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 72, 80, or 96. These correspond to certain rem/px values.

The height of this element is 16rem or 256px


The width of this element is 16rem or 256px

Fractions

The size can also be provided as a fraction of halves, thirds, fourths, fifths, sixths, or twelfths. For example: 1/2, 2/3, 3/4, 2/5, 4/6, and 7/12. This size will be relative to the parent container.

  
This height will be 8rem or 128px because it is half the height of `h-64`




  
This width will be 8rem or 128px because it is half the width of `w-64`

Full/Viewport

We can use -screen to use the full height or width of the screen.

This will be the full height of the screen regardless of parent container
This will be the full width of the screen regardless of parent container

We can use -full to set the height or width to the full size of the parent container. This has the same effect as -screen if the parent container is already the size of the screen.

  
This height will be 16rem or 256px because it is the full the height of `h-64`




  
This width will be 16rem or 256px because it is the full the width of `w-64`

Max Height and Width

We can set the max/min height/width using the max-h-{size}, min-h-{size}, max-w-{size}. The acceptable size values are specific for each. Refer to the Max-Height, Max-Width, Min-Height, and Min-Width documentation for more.

The max height of this paragraph will be 2rem or 48px

Your Turn

In the [Tailwind Playground] create a paragraph tag that will wrap text on a new line when wider than 10rem.

For example, this paragraph will wrap words when the text is wider than 10rem.

Padding and Margin

We can use p-{size} and m-{size} to set padding and margin.

The acceptable size values are the same integers as height and width: 0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 72, 80, and 96.

This paragraph has 2.5 rem or 40px of padding on each side.
This paragraph has 3 rem or 48px of margin on each side.

We can also set the horizontal padding/margin using py, px, my, and mx.

This paragraph has 2.5 rem or 40px of padding on the left and right side.
This paragraph has 3 rem or 48px of margin on the top and bottom side.

We can set padding/margin on a specific side using pt, pr, pb, pl, mt, mr, mb, or ml.

This paragraph has 2.5 rem or 40px of padding on the left side.
This paragraph has 3 rem or 48px of margin on the top side.

Auto and Centering Content.

We’re also able to set margin and padding to automatically fill the available space using -auto. For example, we can center content using mx-auto. Note that the content must have some width. We can sent the width of an element to be the size of its child content using w-fit.

centered paragraph

Border

We have several Tailwind classes for modifying the border of an HTML element.

Border Width

We can set the border-width to 1px using border or provide a size using border-{size} where size is a valid integer 0, 2, 4, or 8.

bordered paragraph


bordered paragraph


bordered paragraph


bordered paragraph

We can also set the vertical border using border-y or the horizontal border using border-x.

This paragraph has a 2px border on top and bottom side
This paragraph has a 2px border on left and right side

Finally, we can set the border width on a specific side using border-t, border-r, border-b, and border-l.

This paragraph has a 2px border on top side
This paragraph has a 2px border on left side

Border Color

We can set the border-color using any colors from the default color palette using border-{color} in combination with border-{size}.

<p>bordered paragraph</p>

Border Radius

We can round the corners of our border using rounded.

This paragraph has a border-radius of 0.25rem or 4px 

We can set the border radius size using rounded-{size}. The size may be none, sm, md, lg, xl, 2xl, 3xl, or full.

This paragraph has a border-radius of 0.5 rem or 8px

We can also set the radius of a specific border corner using t, r, b, l, tl, tr, br, and bl.

This paragraph has a top and bottom right border-radius of 0.5 rem or 8px

This paragraph has a bottom right border-radius of 0.5 rem or 8px

Position

We can set the position value of an HTML element using static (default), fixed, absolute, relative, and sticky. We often use position together with top-{size}, right-{size}, left-{size}, and bottom-{size} to adjust their positioning on the web page.

Hover, Focus, and Other States

We can apply styles based on the state of the element.

For example, we can use hover: with any style to only apply that style on hover.

hover button

We can also use focus: with any style to apply that style on focusing an element. (outline-none removes the default outline on a text input.)

See the Hover, Focus, and Other States documentation for more.

Responsive Styles

We can apply styles based on the screen size using sm:, md:, lg:, xl:, and 2xl:.

Try the following in Tailwind Play and change the width of your browser to see the text size change based on the size of the window.

Small on sm screen, Large on large screen.

See Responsive Design for more.

Limitations & Configuration

Tailwind is opinionated and purposely constrained. For example, Tailwind provides specific sizes when using fixed units. It also has a set color palette rather than allowing us to provide our own color values.

By being opinionated, we’re (hopefully) able to be more productive and consistent. However when we want to break out of the default options, we can provide custom tailwind configuration.

In an HTML file we can write a script to change the tailwind configuration

    
    
    
    
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        "my-color": '#76b5c5',
                    }
                }
            }
        }
    



    

        Hello world!
    

In Tailwind Play there’s a Config tab to change the tailwind configuration.

module.exports = {
  theme: {
    extend: {
      colors: {
        'my-color': '#76b5c5',
      },
    },
  },
  plugins: [],
}

Further Reading

There’s plenty more to learn! Here’s a curated list of some optional reading you may find interesting and useful.

• Utility-First Fundamentals Tailwind has written an excellent overview of the benefits of using utility classes rather than an alternative approach.
• Tailwind Phoenix Guide. Tailwind includes an installation guide for using Tailwind in a Phoenix project. We’ll learn more about Tailwind with Phoenix in a future lesson.
• Dark Mode Tailwind includes a dark: class you can use to apply styles only in dark mode.
• Reusing Styles A guide on how to avoid repeating yourself with Tailwind.
• Adding Custom Styles how to add custom styles to Tailwind.

Refer to the Tailwind Documentation for more!

Commit Your Progress

Run the following in your command line from the project folder to track and save your progress in a Git commit.

$ git add .
$ git commit -m "finish tailwind section"