Transcript

It's mid-2020s when I'm recording this and no conversation on CSS in the mid-2020s is going to be complete if we don't talk about Tailwind. So let's take a look at how we can use Tailwind to take our column layout that's not responsive and not

themable in light and dark mode and turn it into a fully fledged well laid out application. Now unfortunately the starter application we built doesn't actually have Tailwind installed. So the first thing we're going to need to do is install Tailwind. Now over in my ARC browser, which I use

for regular browsing, I have the page up that has the installation for Next.js for Tailwind brought up. There's a link to that in your instructions right down below if you want to take a look at that. The only difference between what they do here and what I'm going to do is I'm going to use PMPM and they use MPM. I'm going to start my starter application that's been copied to a

directory called Tailwind version and I'm going to follow their instructions and add Tailwind CSS, PostCSS, and AutoPrefixer. Now this is Tailwind version 3. Tailwind version 4 at the recording time here is just on the doorstep. It's in beta

currently. With Tailwind 4 you only need to install Tailwind. It's new Oxide engine takes care of the PostCSS and auto-prefixing, and it's all baked into it, and it's 10 times faster and all of that good stuff. All right, let's hit Return. The other thing we need to do is initialize our Tailwind config, another thing you probably

don't have to do in Tailwind before. That's going to create a PostCSS config and a Tailwind config. So back over on our installation instructions, they have a Tailwind configuration section that is actually much larger than what I'm going to show you. Their content section, which is what we need

to alter is set up for any configuration in XJS. All of our code is in the source directory so we're just going to use that last line here which is the source directory version. So inside of this content array I'll give it the source. Now again, in Tailwind 4, you don't need to do any of this. It

automatically picks up your code anywhere it is in your tree, that cool new Oxide engine. Let's hit save. The last thing we need to do to configure it is to go into our source directory, into globals, and add Tailwind to our global CSS. Again, this is another change in Tailwind v4, use an import

statement and you say import Tailwind CSS. Let's fire it up. We shouldn't see any real changes. Oh, we do actually. It's done a bit of a reset for us. So the H1 that was a large font is now down to a small font and we lost our margins on our padding. So everything's kind of in reset for us. Alright,

let's start building out our CSS layout. So I'm going to actually start off by handling a dark mode, light mode switch because it's just crazy easy. Let's go over our layout and in our body tag I'm going to add classes that say that in dark mode we want a black background and a white text. Let's hit

save and then try that out. Alright, let's go over to polypane and because I have dark mode as the default for me, that has automatically set that. Now light, dark, light, dark. Yeah, alright. So yeah, really easy to do dark mode, light mode, and tailwind. Now, the next step I'm going to leave to

you, you're going to set up the layout for the page itself. So that's going to get the 3 column layout. I'm going to give you the classes. They're in the instructions right down below, but you get to apply them to the CSS. Now the file that you're going to want to work on is the page.tsx file, and

the 2 tags you're going to want to work on are the main tag and the div tag. Again, the classes are in the instructions.

lesson

Getting Started with Tailwind CSS

Jack Herrington

Let's take a look at how we can use Tailwind to transform our site's unstyled column layout, which is currently not responsive or themeable in light and dark mode, into a fully-fledged, well-laid-out application.

Installing Tailwind

First, we'll need to install Tailwind. Instructions for installation with Next.js can be found in the Tailwind CSS docs, but we'll work through the steps here as well.

Let's start by navigating to the tailwind-version directory of the repo.

Using PNPM (or NPM or Yarn if you prefer), we'll install tailwindcss, postcss, and autoprefixer:

pnpm add -D tailwindcss postcss autoprefixer

These is for Tailwind version 3. In Tailwind version 4, which is currently in beta, you will only need to install tailwindcss. The new Oxide engine in Tailwind 4 takes care of PostCSS and auto-prefixing, and it's built-in. It's also 10 times faster, which is pretty cool.

After the installation, we need to initialize our Tailwind config:

npx tailwindcss init -p

This command creates a PostCSS config and a Tailwind config.

Configuring Tailwind

Since all of our code is in the src directory, we only need to modify the content section of the tailwind.config.js file:

// tailwind.config.js
module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Again, in Tailwind 4, you won't need to do this. It automatically detects your code anywhere in your project tree.

Adding Tailwind to Global CSS

The last step in the configuration is to add Tailwind to our global CSS. In the src/globals.css file, add the following:

@tailwind base;
@tailwind components;
@tailwind utilities;

In Tailwind 4, you'll use an import statement instead: import 'tailwindcss/tailwind.css';.

Checking the Setup

Start the application by running:

pnpm dev

Here's how it should look:

The base Tailwind config has been applied

We can see that Tailwind has done a bit of a reset for us. The h1 font size is smaller, and we've lost the margins and padding. Everything is kind of reset.

Adding Dark Mode

Let's start building out our CSS layout by handling dark mode and light mode switching.

In the layout.tsx file, add the dark:bg-black and dark:text-white classes to the body tag:

<body className={`${inter.className} dark:bg-black dark:text-white`}>
  {/* ... */}
</body>

This sets a white background and black text in light mode, and a black background with white text in dark mode.

Saving the file, we can see in Polypane that it automatically applies the dark mode styles since that's set as its default:

Toggling between light and dark mode works perfectly. It's really easy to handle dark mode and light mode with Tailwind.

Challenge: Set Up the Page Layout

The next step is to set up the layout for the page itself, which includes a 3-column layout.

To do this, you'll need to update the page.tsx file to add appropriate classes to the main tag as well as the div used to create cards:

// inside page.tsx

<main>
  {PRODUCTS.map((product)) => {
    return (
      <div key={product.id}>
        <ProductCard product={product} />
      </div>
    );
  }}
</main>

The ProductCard.tsx file will also need classes added.

The classes you'll need in no particular order are:

flex-wrap
@container
md:w-1/3
max-w-[960px]
w-full
h-auto
mx-auto
flex
p-2
rounded

Refer to the CSS Modules section and cross-reference the Tailwind docs to figure out which classes to apply where.

For additional reading, check out the tailwind-container-queries repo on Github as well as the docs on responsive design in Tailwind.

In the next lesson, we'll go through which classes to apply to which elements to create the 3-column layout.

Transcript

the 2 tags you're going to want to work on are the main tag and the div tag. Again, the classes are in the instructions.

CSS Modules

Tailwind CSS

CSS-in-JS - Build Time

CSS-in-JS - Runtime

React Component Library Showdown

Transcript

Getting Started with Tailwind CSS

Installing Tailwind

Configuring Tailwind

Adding Tailwind to Global CSS

Checking the Setup

Adding Dark Mode

Challenge: Set Up the Page Layout

Transcript