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

## How to access Tailwind

We can access the Tailwind configuration from JavaScript. This is useful if we want to use those values to create dynamic behavior in our JavaScript framework. We might have some kind of custom animation that needs to respect existing colors or spacing.

Whatever we want to do, Tailwind provides a `resolveConfig` method that takes the Tailwind configuration object as an argument and allows us to query the configuration—the full configuration, not only our overrides in the file:

```
import resolveConfig from 'tailwindcss/resolveConfig'
import myConfig from './tailwind.config.js'
const tailwindConfig = resolveConfig(myConfig)
tailwindConfig.theme.colors
```

The resulting object from `resolveConfig` merges our configuration overrides with the defaults and provides an object we can query.



# How to access Tailwind

We can access the Tailwind configuration from JavaScript. This is useful if we want to use those values to create dynamic behavior in our JavaScript framework. We might have some kind of custom animation that needs to respect existing colors or spacing.

Whatever we want to do, Tailwind provides a `resolveConfig` method that takes the Tailwind configuration object as an argument and allows us to query the configuration—the full configuration, not only our overrides in the file:

```
import resolveConfig from 'tailwindcss/resolveConfig'
import myConfig from './tailwind.config.js'
const tailwindConfig = resolveConfig(myConfig)
tailwindConfig.theme.colors
```

The resulting object from `resolveConfig` merges our configuration overrides with the defaults and provides an object we can query.



Learn about how to access the Tailwind configuration from JavaScript.

Introduction

Getting Started with Tailwind

Tailwind Basics

Typography

The Box

Page Layout

Animation

Responsive Design

Customizing Tailwind

Conclusion

Appendix

Access Tailwind from JavaScript

How to access Tailwind