Tailwind

Mix.install(
  [
    {:jason, "~> 1.4"},
    {:kino, "~> 0.9", override: true},
    {:youtube, github: "brooklinjazz/youtube"},
    {:hidden_cell, github: "brooklinjazz/hidden_cell"},
    {:kino_tailwind_playground, github: "BrooklinJazz/kino_tailwind_playground"}
  ],
  force: true
)

Navigation

Home Report An Issue Blog: Cover ImageBlog: Home Page

Review Questions

Upon completing this lesson, a student should be able to answer the following questions.

• Why use Tailwind vs pure CSS?
• How do you find Tailwind utility classes?

Overview

Tailwind CSS 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!
  

We’ve also created a Livebook Tailwind Playground for the purposes of demonstration. All tailwind examples are editable and render live.

Kino.nothing()

Your Turn

Tailwind provides the Tailwind Play playground to experiment with Tailwind classes.

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 */
}

Documentation

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

Your Turn (BONUS)

Use the Tailwind Documentation to create the following button.

Kino.nothing()

Colors

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, amber, 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.

This color pallet works with a variety of utility classes such as text-color and background-color.

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

Kino.nothing()

Text

Font Size

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.

Kino.nothing()

Font Weight

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

Kino.nothing()

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.

Kino.nothing()

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 or 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

Centering Fitted Content

Combining w-fit

Kino.nothing()

Your Turn

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.

Kino.nothing()

Display

Tailwind has display utility classes for controlling the display type of an element. Here are a few examples:

• block
• inline-block
• inline
• flex

See basic-usage for an explanation of these properties.

Your Turn

Apply the inline-block on all of these span tags so that they can have height apply to them, and display on the same line.

Then change inline-block to block to see each span tag rendered on their own line.

Kino.nothing()

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

Your Turn

Create a series of rainbow boxes in the center of the page. Each box should be 3/4 of the page width.

Example Solution

Kino.nothing()

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 of 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

Your Turn

Create a rounded rainbow using border styles and padding.

Example Solution

Kino.nothing()

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.

Your Turn

Use absolute positioning to play a paragraph tag on the bottom-right corner of the display.

Kino.nothing()

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.

Your Turn

Make a button that changes styles on hover.

Kino.nothing()

Responsive Styles

We can apply styles based on the screen size using sm:, md:, lg:, xl:, and 2xl:. Omitting the screen size applies the style on all screens (including those smaller than sm.)

Your Turn

Change the text size of a paragraph tag based on the screen size. Use the xs, sm, and md buttons in the playground to see the styles applied.

Kino.nothing()

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

DockYard Academy now recommends you use the latest Release rather than forking or cloning our repository.

Run git status to ensure there are no undesirable changes. Then run the following in your command line from the curriculum folder to commit your progress.

$ git add .
$ git commit -m "finish Tailwind reading"
$ git push

We’re proud to offer our open-source curriculum free of charge for anyone to learn from at their own pace.

We also offer a paid course where you can learn from an instructor alongside a cohort of your peers. We will accept applications for the June-August 2023 cohort soon.

Navigation

Home Report An Issue Blog: Cover ImageBlog: Home Page