Gain insights into industry best practices for designing web pages with Tailwind CSS. Explore typography, box models, and master layouts using flexbox and grids effectively.

docker.tar.gz

QS_Tailwind

Apply_tailwind

This course examines and explains industry best practices to design web pages using Tailwind CSS. We’ll start with the typography of individual elements, and then we’ll get to “the box”—the rectangle of space each element takes up on a web page and how to manipulate it. Once we have our elements in boxes, we’ll take a look at the page layout using flexbox and grids.

Modern CSS with Tailwind

# Sample code

To run the sample application, we need to download the code below.


For the `Rails version`, which is in the main directory, we need to have Ruby 3.0 and SQLite installed on our system. Running `bin/setup` in the sample code directory will load the Rails specific parts. Next, the rails server will load the application itself, and we  should be able to access the site at `http://localhost:3000`. The samples are located at `http://localhost:3000/intro, http://localhost:3000/box`, and `http://local- host:3000/page`.

For the React version, which is in the ``react_create_app`` directory, we need to have ``npm`` and ``yarn`` installed. With those in place, `yarn install` will install all the needed modules, and ``yarn start``  will start the development server. All the samples can be accessed from ``http://localhost:3000``, and we can see the basic HTML inside the component at ``src/App.js``.

> **Note**: There is no real application here. You should be able to start from scratch and install Tailwind in a blank project of the build tool of your choice and follow along with the HTML examples.

Tailwind is both a set of utility classes and a CSS preprocessor that generates those CSS classes and allows the use of additional CSS tools like the `@apply` directive. We need to install the framework itself and also patch it into our CSS processing toolchain

Learn how to install Tailwind in Ruby on Rails and React.


Introduction

Getting Started with Tailwind

Tailwind Basics

Typography

The Box

Page Layout

Animation

Responsive Design

Customizing Tailwind

Conclusion

Appendix

Installing Tailwind

Sample code