Name: Adding a Shadow to an SVG Icon with Tailwind CSS
Uploaded: 2023-12-16T01:25:40Z
Description: Learn how to add a shadow that follows the edges of an SVG icon using Tailwind CSS DropShadow, giving your icons a smoother and more visually appealing look.

We have this beautiful snowflake icon, very seasonal (well, not so much from Australia), and we're going to try and make this snowflake stand out a little bit more by adding a shadow behind it.

![snowflake icon](https://res.cloudinary.com/epic-web/image/upload/v1702675339/tips/Screenshot_2023-12-15_at_3.18.37_PM.png)

First, let's try adding a shadow with the class attribute for our SVG:

```html
<svg class="h-64 w-64 stroke-white shadow-md"></svg>
```

When you save this, you can see that the shadow is actually a rectangle around the snowflake, which is not what we want. Let's make it bigger with `shadow-xl`:

```html
<svg class="shadow-xl"></svg>
```

That's the thing with box shadows—they take the bounding rectangle of an element and then apply the shadow around it. We don't want that, so maybe we can try `outline` or `ring` utilities? Unfortunately, they're also square.

Let me show you a CSS property that's going to be really useful for us here. In the Tailwind docs, search for [Drop Shadow](https://tailwindcss.com/docs/drop-shadow). Drop Shadow is a CSS filter, and it looks similar to a box shadow with the big difference that it will follow the edges of a shape, which is super cool for what we're trying to do.

So let's try it here with `drop-shadow`:

```html
<svg class="drop-shadow-md"></svg>
```

This is much better. You can see the Drop Shadow filter is following every single crystal little edge of this icon, which is way, way, way better.

Let's try a large one, or even extra large:

```html
<svg class="drop-shadow-xl"></svg>
```

And voila, our snowflake now stands out beautifully from the background.

![A beautiful snowflake with a shadow](https://res.cloudinary.com/epic-web/image/upload/v1702675339/tips/Screenshot_2023-12-15_at_3.21.02_PM.png)


Learn how to add a shadow that follows the edges of an SVG icon using Tailwind CSS DropShadow, giving your icons a smoother and more visually appealing look.

Adding a Shadow to an SVG Icon with Tailwind CSS

[00:00] We have this beautiful snowflake icon, very seasonal, well, not so much from Australia, and we're going to try and make this snowflake stand out a little bit more by adding a shadow behind it. So here's the class attribute for my SVG. Let's try to add a shadow and let's go

[00:15] ShadowMD. And when I save this, you can see that the shadow is actually a rectangle around the snowflake, which is really not that great. Let's make it bigger, ShadowXL, to make sure that you can see that. And that's the thing with box shadows, they take the bounding rectangle of an element and then apply the shadow around this. And we don't want that, so maybe we can try

[00:35] outline? Nope, square as well. What about ring utilities? Nope, square as well. Okay, let me show you a CSS property that's going to be really useful for us here. In the Tailwind docs, I will search for DropShadow. DropShadow is a CSS filter, as you can see in the sidebar category, and it

[00:54] looks similar to a box shadow with the big difference that it will follow the edges of a shape, which is super cool for what we're trying to do. So let's try it here, DropShadow, and let's try the medium one. And yeah, this is much better. You can see the DropShadow filter is following

[01:12] every single crystal little edge of this icon, which is way, way, way better. Let's try a large one, or even extra large. And voila, our snowflake now stands out beautifully from the background.

[Edmund Hung](https://twitter.com/_edmundhung), the author of [Conform](https://conform.guide), has released version 1 of the fantastic form library. In this video, we walk through the migration process and highlight the changes. The upgrade to Conform V1 brings some exciting new features, such as the `submission.reply` API, simplified form setup, and improved error handling. Join us as we explore the updates and learn how to make the most of Conform V1.

Upgrade to Conform V1 and experience simplified form setup, enhanced error handling, and exciting new features.

Upgrade to Conform V1

In [a previous tutorial](https://www.epicweb.dev/tips/text-and-image-clipping-effects), we created a cool text effect using `background-clip`:

![The existing background-clip text effect](https://res.cloudinary.com/epic-web/image/upload/v1706117042/tips/mix-blend-modes/mix-blend-modes_1_00-00.240-in-a-previous-tip.-weve-created-this-pretty-cool-background-clip-text-effect-and-were.png)

Now, we're going to expand on our previous work to give us more control over the effect using mix blend modes.

## Setting the Stage

To start with, we'll strip down the code from the previous tip leaving only the basic structure:

```tsx
export default function ImageText() {
	return (
		<div className="font-paytone-one grid h-screen place-items-center"></div>
	);
}
```

The first thing we'll add is a large black rectangle to act as a frame Create a new `div` with a class of `bg-black`. For the width, we'll use `w-2/3` to take up two-thirds of the available space. Instead of setting a fixed height, we're going to use the built-in `aspect-video` class to give the rectangle a ratio of 16:9 like a video would have. This creates a nice, large box for us to work with.

```tsx
<div className="font-paytone-one grid h-screen place-items-center">
	<div className="aspect-video w-2/3 bg-black"></div>
</div>
```

Now our frame is in place:

![The black rectangle frame is in place.](https://res.cloudinary.com/epic-web/image/upload/v1706117150/tips/mix-blend-modes/mix-blend-modes_9_00-45.340-and-what-we-want-to-do-this-time-is-fill-the-entire-box-here-with-our-background-image.png)

Our goal is to fill the frame with our background image. Then the text will sit in the center, and the image will be visible both through the text as well as the rest of the frame.

In order to be able to absolutely position things inside of the frame, we will give it the class of `relative`. Then inside of the frame `div`, we'll add an `img` tag that points to our space scene. To position the image exactly where we want it, we set it to an absolute position. To avoid stretching the image, we'll add the `object-cover` property.

We can remove the `bg-black` class from the frame `div` now that we have our background image in place:

```tsx
<div className="font-paytone-one grid h-screen place-items-center">
	<div className="relative aspect-video w-2/3">
		<img
			src="/img/space-scene.png"
			className="absolute inset-0 w-full h-full object-cover"
		/>
	</div>
</div>
```

Here's how it looks:

![The space image is displayed](https://res.cloudinary.com/epic-web/image/upload/v1706117269/tips/mix-blend-modes/mix-blend-modes_18_01-44.500-so-i-could-fix-this-with-position-relative..png)

## Adding the Text

With our background image in place, we can bring back our heading tag and position it in the center of the box.

Note that we can't see the text because it's behind the absolutely positioned image. We can fix this by giving the frame `div` a `relative` position:

```tsx
<div className="font-paytone-one grid h-screen place-items-center">
	<div className="relative aspect-video w-2/3">
		<img
			src="/img/space-scene.png"
			className="absolute inset-0 w-full h-full object-cover"
		/>
		<h1 className="isolate text-8xl font-black uppercase">Epic Web</h1>
	</div>
</div>
```

For the `h1`, instead of using `relative` for positioning, we will use the `isolate` property. This will create a new stacking context in a more direct way than using `relative`.

Here's how it looks with our heading added:

![Text is displayed over the image](https://res.cloudinary.com/epic-web/image/upload/v1706117368/tips/mix-blend-modes/mix-blend-modes_23_02-05.920-to-do-that..png)

In order to center the text, we'll add a `div` that wraps the `h1`. The `div` will use CSS Grid to take up all the available height and center the text vertically and horizontally. We'll use the `place-items-center` class to center the text, and move the `isolate` class from the `h1` into this new wrapper div:

```tsx
// below the img tag
<div className="isolate grid h-full place-items-center">
	<h1 className="text-8xl font-black uppercase">Epic Web</h1>
</div>
```

![The text is centered](https://res.cloudinary.com/epic-web/image/upload/v1706117460/tips/mix-blend-modes/Mix_Blend_Modes-01.png)

## Adding the Clipping Effect

Now that everything is set, we are ready to create the see-through clipping effect using mix blend modes.

First, we will color the entire `div` that wraps the heading with a black background and color the heading text white:

```tsx
// below the img tag
<div className="isolate grid h-full place-items-center bg-black">
	<h1 className="text-8xl font-black uppercase text-white">Epic Web</h1>
</div>
```

Here's how it looks:

![White text on a black background](https://res.cloudinary.com/epic-web/image/upload/v1706117683/tips/mix-blend-modes/mix-blend-modes_35_03-00.920-were-going-to-use-the-darken-mixed-blend-mode..png)

The magic comes from using the `mix-blend-darken` class on the wrapping `div`:

```tsx
// below the img tag
<div className="isolate grid h-full place-items-center bg-black mix-blend-darken">
	<h1 className="text-8xl font-black uppercase text-white">Epic Web</h1>
</div>
```

In this case, `darken` says that when two things are layered on top of each other, the darker pixel wins.

Since we have a black background, it will stay in place. However, since text is white, it will allow image to show through:

![The finished product](https://res.cloudinary.com/epic-web/image/upload/v1706117575/tips/mix-blend-modes/mix-blend-modes_42_03-41.600-so-you-might-wonder-why-not-just-use-the-background-clip-text-thing-that-weve-done-before..png)

## Exploring the Possibilities

There are many `mix-blend-` classes available that give us far more flexibility than that the `background-clip` method. For example, any shape or SVG icon could be used to show the image. There are also other modes that allow for other effects like blurring.

However, you might be wondering why not use the background-clip text method from the previous tutorial. The main advantage of using mix blend modes is the flexibility it offers.

Let's experiment with a shape that we can draw using a `div`.

Comment out the `h1` and create a div with a height and width of 56 pixels, rounded to `xl`, and rotated 45 degrees with a white background:

```tsx
<div className="isolate grid h-full place-items-center bg-black mix-blend-darken">
	<div className="h-56 w-56 rounded-xl rotate-45 bg-white"></div>
</div>
```

![The rounded box shows the image behind it](https://res.cloudinary.com/epic-web/image/upload/v1706117776/tips/mix-blend-modes/mix-blend-modes_53_04-34.500-thats-pretty-cool..png)

This technique also supports animation. We can add the `transition` class along with `hover:translate-x-40` which will move the div over by 40 pixels and `hover:rotate-0` which will remove the rotation on hover:

![The box has rotated and moved.](https://res.cloudinary.com/epic-web/image/upload/v1706117908/tips/mix-blend-modes/mix-blend-modes_54_04-35.500-and-you-can-see-that-the-mixed-blend-mode-will-always-take-care-of-revealing-the-correct.png)

We could also paste in an SVG icon and add the `animate-spin` class along with `[animation-duration:60s]` to make it spin for a minute:

![A spinning icon displays the image behind it](https://res.cloudinary.com/epic-web/image/upload/v1706118113/tips/mix-blend-modes/mix-blend-modes_62_05-22.020-and-this-is-much-more-acceptable-and-enjoyable..png)

If we switch `mix-blend-darken` to `mix-blend-lighten`, the lighter pixels will always win. Here's how it looks in this opposite mode:

![Example of the `mix-blend-lighten` mode](https://res.cloudinary.com/epic-web/image/upload/v1706118216/tips/mix-blend-modes/mix-blend-modes_66_05-44.900-so-if-you-wanted-to-recreate-the-cropping-effect.-youd-need-to-have-your-background.png)

You can also use other colors besides pure black and white.

Going back to our text example, we can update the `bg-black` class to `bg-yellow-600` to give the image a chance to show through:

![More of the background shows with bg-yellow-600](https://res.cloudinary.com/epic-web/image/upload/v1706118302/tips/mix-blend-modes/mix-blend-modes_74_06-30.300-and-as-you-can-see.-the-results-are-a-little-bit-unpredictable.-but-really-cool..png)

Changing the background back to black but at 70% opacity gives us a different effect:

![The effect with 70% opacity](https://res.cloudinary.com/epic-web/image/upload/v1706118379/tips/mix-blend-modes/mix-blend-modes_77_06-52.700-if-you-want-just-a-tiny-bit-of-the-image-to-show.-you-can-go-something-higher.-80percent.-like.png)

We've only scratched the surface of the effects that you can create with the help of `mix-blend` modes.

## Adding Animation

Now, let's revisit the `slowpan` animation we created in the previous tutorial. This time, we'll be adding the animation onto the image instead of the text.

Since the image is using 100% of the frame, when we move it, it will show its edges and look a bit odd.

To avoid this, we need to increase the size of the image so that it's larger than the frame. This will give us room to animate the image without showing the edges.

Because the Tailwind CSS reset sets the max width to 100%, we will need to remove it in order to give the image sizes larger than 100%.

In the image tag, we'll set the height and width each to 120%:

```tsx
<img src="/img/space-scene.png" className="animate-slowpan absolute inset-0 h-[120%] w-[120%] object-cover>
```

![The background image is larger than the frame now](https://res.cloudinary.com/epic-web/image/upload/v1706118476/tips/mix-blend-modes/mix-blend-modes_115_10-27.440-okay.-so-lets-try-this..png)

In order for the animation to look good, we'll need to make some adjustments to the presets file at `tailwind-presets/image-text.ts`:

```tsx
// inside of tailwind-presets/image-text.ts
...
keyfames: {
  slowpan: {
    '0%': { transform: 'translateX(0) translateY(0)' },
    '100%': { transform: `translateX(-${(20 / 1.2).toFixed(2)}%) translateY(-${(20 / 1.2).toFixed(2)}%)` },
  },
},
animation: {
  slowpan: 'slowpan 15s alternate ease-in-out infinite',
},
```

Note that the `translateX` and `translateY` values are divided by 1.2 because the image is 120% of the frame size. This division is needed to give us the correct values for the animation effect we want.

Finally, we can add the `overflow-hidden` property to our frame div, which crops out whatever part of the image is outside the frame:

![The finalized animation](https://res.cloudinary.com/epic-web/image/upload/v1706118525/tips/mix-blend-modes/mix-blend-modes_138_12-31.720-and-we-have-a-pretty.-pretty-cool-effect..png)

## Fine-Tuning the Effect

To add some finishing touches, we add a border around the image using tailwind's `ring` utilities. In this case we'll use `ring-inset`, set the width to 20px, and set the color to `slate-600` so some of the image can show through.

```tsx
<div className="isolate grid h-full place-items-center bg-black/70 mix-blend-darken ring-[20px] ring-inset ring-slate-600>
```

![The image with the ring inset added](https://res.cloudinary.com/epic-web/image/upload/v1706118566/tips/mix-blend-modes/mix-blend-modes_145_13-15.040-i-know-i-keep-saying-this.-but-the-result-will-be-drastically-different-based-on-the.png)

If the background image was high contrast or had sharp features, we could also add a slight blur to soften it a bit. However, it's not necessary for the space image we're using.

And with that, we've created an awesome text over image effect using `mix-blend` modes along with some of Tailwind's other utilities.


Learn how to create a stunning text over image effect using mix blend modes.

Mix Blend Modes

In a [previous tip](https://www.epicweb.dev/tips/text-and-image-clipping-effects), we created a `text-behind-image` effect with a bit of animation that reveals different parts of the image. While this effect looks cool, it can trigger motion sickness in some users. To address this issue, we can stop the animation when the user has enabled the "reduce motion" option in their OS settings.

![photo of reduce motion setting on Mac OS](https://res.cloudinary.com/epic-web/image/upload/v1705441118/tips/Screenshot_2024-01-15_at_10.30.11_AM.png)

Looking at the code in our example you can see the animation depends on a single class, `animate-slowpan`

```typescript
export default function ImageText() {
	return (
		<div className="grid h-screen place-items-center font-paytone-one">
			<div className="animate-slowpan bg-[url('/img/space-scene.png')] bg-[size:130%] bg-clip-text text-8xl font-black uppercase text-transparent">
				Epic Web
			</div>
		</div>
	);
}
```

To stop the animation when "reduce motion" is enabled, we can use Tailwind's `motion-safe:` modifier on `animate-slowpan`.

```typescript
<div className="motion-safe:animate-slowpan bg-[url('/img/space-scene.png')] bg-[size:130%] bg-clip-text text-8xl font-black uppercase text-transparent">
```

With "reduce motion" enabled, the animation stops, and the background position is set to top-left. When "reduce motion" is disabled, the animation starts again.

Using the `motion-safe` modifier, you can prefix any Tailwind class and it will only apply the styles if the user has not checked prefers reduce motion.

In addition to `motion-safe`, Tailwind offers another modifier, `motion-reduce`. We can use this to show a more interesting part of the image when the user has enabled "reduce motion"

Let's take the background image position from top-left to center by adding `motion-reduce:bg-center`

```typescript
<div className="motion-safe:animate-slowpan bg-[url('/img/space-scene.png')] bg-[size:130%] bg-clip-text text-8xl font-black uppercase text-transparent motion-reduce:bg-center">
```

So now, if you enable the reduce motion setting, the image will be centered, and have no animation.

This makes the site more accessible and ensures a comfortable experience for users who opt for reduced motion.


Learn how to make your web animations respect user preferences by using Tailwind CSS's motion-safe modifier to handle prefers-reduced-motion in OS.

Motion Safe and Motion Reduce Modifiers

[00:00] In another tip that you can find linked below the video, we've created this pretty cool text behind image effect with a bit of animation that reveals different parts of the image. Now this effect is objectively looking pretty cool, but this sort of stuff can also trigger some motion sickness in some folks. There's an operating system level option called reduce motion

[00:19] and we should really honor that. When this option is turned on, we want to stop this animation. Looking at the code for this example, all of the motion is depending on one single class, this animate slow pan class. And so we want to cancel this class if a user has chosen to reduce

[00:36] motion at their OS level settings. In Tailwind, we can add the motion safe modifier and this will wrap our animation definition inside a prefers reduce motion media query. As a result, looking at our UI, you can see that reduce motion is not on and the animation is going. But if I click this,

[00:54] the animation stops and the background position is set to top left. Turn it back off, the animation will start again and when I reduce motion once again, it stops. With the motion safe modifier, you can prefix any Tailwind class and it will only apply the styles if the user has not checked

[01:14] prefers reduce motion. There's also the opposite modifier, motion reduce, and perhaps we could do something here where if a user has checked reduce motion like here, we give them a more interesting part of the image than the top left. For example, something near the middle of the image where we

[01:31] have a few more colors somewhere around here. And so just like we've done motion safe here, we'll do motion reduce and we'll change the background position from top left, which is the default, to bg center. And this time, if the prefers reduce motion is set to reduce, in other words, the reduce

[01:50] motion option is checked, then we will set the background position to center. And so now if I enable reduce motion, the image will be cropped in its center, which arguably looks a little bit better than when cropped to the top left. And so that way we still deliver a pleasant experience to the folks that have checked the reduce motion checkbox.

Tailwind CSS's **`has`** utility brings a new layer of flexibility to styling based on conditions.

We have four cards, some have a title, some don't, and some have an image.

![final](https://res.cloudinary.com/epic-web/image/upload/v1704929692/tips/Screenshot_2024-01-10_at_4.22.59_PM.png)

Data for the cards is structured as an array of objects with properties like **`title`**, **`text`**, and optionally, **`image`**. The interface is an unordered list in a two-column grid, dynamically rendering cards for each data item.

```tsx
const cardsData = [
	{
		title: 'Card Without An Image',
		text: 'Lorem epic dolor stack amet epic adipisicing elit.',
	},
	{
		text: "This card doesn't even have a title! No image, no title. Just a bunch of text. Still, this card belongs here!",
	},
	{
		title: 'Card with title and image',
		text: 'Lorem epic dolor stack amet consectetur.',
		image: `https://images.unsplash.com/photo-1530714457710-6bf1899c1d32?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjZ8fHZpYnJhbnQlMjBjb2xvcnN8ZW58MHwwfDB8fHww`,
	},
	{
		text: 'This card has an image, but no title.',
		image: `https://images.unsplash.com/photo-1528811692195-d5037ac4b7cc?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTA2fHx2aWJyYW50JTIwY29sb3JzfGVufDB8MHwwfHx8MA%3D%3D`,
	},
]

export default function Has() {
	return (
		<div className="min-h-screen bg-slate-300">
			<ul className="mx-auto grid max-w-5xl grid-cols-2 items-start gap-4 p-6">
				{cardsData.map((card, i) => (
					<Card key={i} {...card} />
				))}
			</ul>
		</div>
	)
}
```

The **`Card`** component takes optional **`image`** and **`title`** props alongside a mandatory **`text`** prop.

```tsx
type CardProps = {
	image?: string
	title?: string
	text: string
}

function Card({ image, title, text }: CardProps) {
   return (
   	<li className="overflow-hidden rounded-lg bg-white p-4 shadow-md ring-1 ring-black/5 transition hover:-translate-y-px hover:shadow-lg">
   		{image && <img src={image} alt="" className="mb-4" />}
   		<div className="grid gap-2">
   			{title && <h2 className="text-xl font-medium">{title}</h2>}
   			<p className="text-slate-700">{text}</p>
   		</div>
   	</li>
   )
}
```

The `has` pseudo-class allows you to style an element based on the condition that you pass as a parameter. For example, we can change the background color of a card if the card has a title by adding `has-[]` to our `li` element and setting a condition `has-[h2]:bg-yellow-200`

```tsx
<li className="overflow-hidden rounded-lg bg-white p-4 shadow-md ring-1 ring-black/5 transition hover:-translate-y-px hover:shadow-lg has-[h2]:bg-yellow-200">

```

Now, only the cards with an `h2` tag have that yellow background color. We can do the same for cards that have an image by changing our condition from `has-[h2]` to `has-[img]` Now, the two cards with the image have the background color. 

But what about cards that have both an image and a title? There's only one card with both in our example.

We can try using the sibling selector `has-[img+h2]`

However, this doesn't work. The syntax `img+h2` expects an `h2` tag to be an immediate sibling of the image, which isn't the case in our example. We have an image, and its immediate sibling is a `div`. Inside that `div`, there's an `h2` element.

To express the correct relationship between these elements, we can use the following selector `has-[img+div_h2]`

By constructing the correct condition, we can see that this is a powerful technique, even though we're just scratching the surface.

Now, let's make our example more useful and realistic. We'll remove the `has-[img+div_h2]:bg-yellow-200`. 

Our goal is when a card has an image, make the image full-bleed inside the card container. To do that, we need to remove the internal padding that the card has, which is applied with `p-4`.

To remove the padding when there's an image, we can try adding `has-[img]:p-0`. This works nicely, and the image now goes edge to edge

However, since the padding was removed, we need to fix the padding on the text section. One solution is adding padding to the container containing the title and text.

```html
<div className="grid gap-2 p-4">

```

This works just fine for the cards with an image, but we now have double padding,for those who don't have an image. 

To fix this, we can do something similar to what we did earlier. If there's an image, we want to add the padding. This is only a problem when we have an image

You might be tempted to use `has-[img]:p-4` to add padding to an element containing an image. However, this won't work as expected. The `has-[img]` class is looking for an `<img>` tag inside the current element, but our `<div>` doesn't have an image inside. The image is outside of it.

We can create a group and use the `group-has` utility to solve this issue. Add the group class on the `<li>` element, and now the padding is applied correctly in all scenarios, whether there's an image or not.

```jsx
<li className="group overflow-hidden rounded-lg bg-white p-4 shadow-md ring-1 ring-black/5 transition hover:-translate-y-px hover:shadow-lg has-[h2]:bg-yellow-200">

....
....

<div className="grid gap-2 group-has-[img]:p-4">

```

 The `group-has` utility intelligently scopes the `has` condition to the group, which is the `<li>` element in this case.

Now that we've changed the way our card is built, let's remove the `className="mb-4"` on the image, because of the way we're handling spacing now we never have to worry about spacing from the image because If the image is there It will create the padding around the text container.

### Handling Name Scoped Groups

Sometimes, you have name-scoped groups, like `group/card`, which is useful when you have multiple nested groups and need to differentiate them. This will break our card because it now relies on the `group/card`.

```jsx
<li className="group/card overflow-hidden rounded-lg bg-white p-4 shadow-md ring-1 ring-black/5 transition hover:-translate-y-px hover:shadow-lg has-[h2]:bg-yellow-200">
```

To fix this, make sure the `group-has` condition also respects this namespace:

```html
<div className="grid gap-2 group-has-[img]/card:p-4">
```

Now everything works as expected.

![cards example](https://res.cloudinary.com/epic-web/image/upload/v1704929692/tips/Screenshot_2024-01-10_at_4.22.59_PM.png)

### Arbitrary variants

Out of the box, the `has` utilities are already quite flexible. If you need more complex functionality, you can always use arbitrary variants to customize your design further. Let's say you want to change the background color of cards that do not have a title. You can use an arbitrary expression to achieve this. Combine the `:has` utility with the `:not` pseudo-class like so:

```jsx
[&:not(:has(h2))]:bg-yellow-200
```

This will change the background color of cards without an `<h2>` element.

Hopefully, this has given you some ideas, and your brain is now buzzing with things you could do using the `has` utility in Tailwind CSS.

Exploring the has Utility in Tailwind CSS

Let's have some fun with text and image clipping effects. Our starting point is just a black, bold text.

![starting point](https://res.cloudinary.com/epic-web/image/upload/v1704929690/tips/Screenshot_2024-01-10_at_5.20.23_PM.png)

```tsx
export default function ImageText() {
	return (
		<div className="font-paytone-one grid h-screen place-items-center">
			<h1 className="text-8xl font-black uppercase">Epic Web</h1>
		</div>
	);
}

```

Our goal is to show an image through this text, and there are a few options to achieve that.

I'm going to start by using the `bg-clip-text` property. I thought a space landscape with many pinks and purples would look pretty cool, so I've asked ChatGPT to create one for me.

![Pixar-style vibrant space landscape](https://res.cloudinary.com/epic-web/image/upload/v1704929694/tips/DALL_E_2024-01-10_08.18.31_-_A_Pixar-style_vibrant_space_landscape_featuring_pink_and_purple_hues._The_landscape_should_depict_a_whimsical_animated_cosmic_setting_with_imaginati.png)

To apply the image as a background, we'll use `bg-[url()]` on our heading tag, and inside the `url()` value you pass the URL of the image. I've placed that image in my project, so I can reach it with `images/space-scene.png`.

```tsx
export default function ImageText() {
	return (
		<div className="font-paytone-one grid h-screen place-items-center">
			<h1 className="text-8xl font-black uppercase bg-[url('/img/space-scene.png')]"> Epic Web</div>
		</h1>
	);
}

```

![example](https://res.cloudinary.com/epic-web/image/upload/v1704929693/tips/Screenshot_2024-01-10_at_5.23.30_PM.png)

Next, we'll use the  `bg-clip-text`. It will look like the image has disappeared, but it has not. It's simply hidden behind the black color text that is applied to our `h1`. And we can reveal this by making the text of the `h1` transparent.

```tsx
export default function ImageText() {
	return (
		<div className="font-paytone-one grid h-screen place-items-center">
			<h1 className="bg-[url('/img/space-scene.png')] bg-clip-text text-8xl font-black uppercase text-transparent"> Epic Web</div>
		</h1>
	);
}

```

And just like that, we have a pretty cool baseline effect of text showing an image. You can see the image is a little bit blurry, and this is because the image is much bigger than the text. To fix this, I'll add the `bg-cover` property, so it's going to crop the image better to fit within the text.

![final](https://res.cloudinary.com/epic-web/image/upload/v1704929692/tips/Screenshot_2024-01-10_at_5.25.23_PM.png)

It's starting to look really good!

## Adding Animation to the Background

Instead of using `bg-cover`, we'll intentionally make the size a bit bigger than necessary. We'll set it to `bg-[130%]`. 

But we want this to be the background size. If you hover over `bg-[130%]`, you can see we have `background-position`, so we can drop a hint to the arbitrary value that this is a kind of length CSS data type; `bg-[length:130%]`. Now If you hover you'll see `background-size`

*Quick tip:* If you type "size" followed by an arbitrary value, it will also set it to `background-size`. This can make the code more readable, `bg-[size:130%]`

Now the image will be approximately 30% bigger than the word. The goal is to move the background image diagonally behind the text, creating an interesting visual effect.

Let's update the config file to extend the keyframes object. We'll name our animation "slowpan". 

```css
keyframes: {
  slowpan: {
  '0%': { backgroundPosition: 'top left' },
  '100%': { backgroundPosition: 'bottom right' },
}

```

Next, let's create a new animation and use the "slowpan" keyframe. For now, we'll make the animation duration very fast to help us better understand what's happening

```css
animation: {
  slowpan: 'slowpan 5s linear infinite',
}

```

Okay, so on our `h1`, we will add the new animate utility we've created `animate-slowpan`, which is using the keyframes we've just defined.

```tsx
export default function ImageText() {
	return (
		<div className="font-paytone-one grid h-screen place-items-center">
			<div className="bg-[url('/img/space-scene.png')] bg-clip-text text-8xl font-black uppercase text-transparent animate-slowpan"> Epic Web</div>
		</div>
	);
}

```

Once you play the animation you will notice that it animates from top to bottom and then jumps back to the starting position. To fix this, we change the animation direction to `alternate`. Also let's speed up the animation to 3 seconds to see the changes more quickly.

```css
animation: {
  slowpan: 'slowpan 3s alternate linear infinite',
}

```

The animation now moves down and back up smoothly. Let's slow it down and add some easing instead of linear bounce to make it look even better. We change the duration from 3 seconds to 30 seconds and try the default `ease-in-out` easing.

```css
animation: {
  slowpan: 'slowpan 30s alternate ease-in-out infinite',
}

```

We can see that the animation slows down as it reaches the top and starts again smoothly, creating a polished effect.

The `bg-clip-text` is somewhat limited. It only allows text to show the image through it, and we might want the image to also be visible outside of the text, albeit in a more subtle and faded way. Additionally, we might want to use shapes or border/ring utilities instead of text to achieve a similar effect.

To accomplish this, we can use mixed blend modes, which will be demonstrated in another tip.

Text and Image Clipping Effects

Have you ever looked at markup like this and thought to yourself, _whoa, this is a lot of repetition_? That's a valid concern and one of the trade-offs of working with Tailwind CSS. Consider the following:

```tsx
export default function DirectChildren() {
	return (
		<div className="mx-auto max-w-5xl p-4">
			<h1 className="text-2xl font-medium">Direct children selector</h1>
			<ul className="mt-6 flex flex-wrap gap-x-4 gap-y-3 font-medium">
				<li className="rounded-full bg-amber-200 px-5 py-1 text-amber-800">
					you
				</li>
				<li className="rounded-full bg-amber-200 px-5 py-1 text-amber-800">
					can
				</li>
				<li className="rounded-full bg-amber-200 px-5 py-1 text-amber-800">
					now
				</li>
				<li className="rounded-full bg-amber-200 px-5 py-1 text-amber-800">
					style
				</li>
				...
			</ul>
		</div>
	);
}
```

Here, you can see that each `li` element is styled in the same manner. This repetition could make your code look cluttered and harder to maintain.

One method to tidy up this code is by taking advantage of the `*:class` syntax, a direct children selector that you can use in Tailwind CSS. This little trick lets us apply styles to direct children of an element from the parent, thereby making our HTML more concise. Here's how the same code would look using the direct children selector:

```tsx
export default function DirectChildren() {
	return (
		<div className="mx-auto max-w-5xl p-4">
			<h1 className="text-2xl font-medium">Direct children selector</h1>
			<ul className="mt-6 flex flex-wrap gap-x-4 gap-y-3 font-medium *:rounded-full *:bg-amber-200 *:px-5 *:py-1 *:text-amber-800">
				<li>you</li>
				<li>can</li>
				<li>now</li>
				...
			</ul>
		</div>
	);
}
```

In the updated code, all the styles for the `li` items are applied from the `ul` element using the `*:class` syntax. However, keep in mind that this approach might not be suitable for all scenarios, especially when you're responsible for the direct children of an element.


Simplify your Tailwind CSS code by styling direct children from the parent element.

Direct Children Selector in Tailwind CSS

Let's take a look at how to create a hamburger menu toggle that transitions to a cross icon on hover. We have this simple icon:

```html
<div class="grid justify-items-center gap-1.5">
  <span class="h-1 w-8 rounded-full bg-black">/<span>
  <span class="h-1 w-8 rounded-full bg-black">/<span>
  <span class="h-1 w-8 rounded-full bg-black">/<span>
</div>
```

![Hamburger menu icon](https://res.cloudinary.com/epic-web/image/upload/v1703108133/tips/Screenshot_2023-12-20_at_3.06.05_PM.png)

To create the cross icon, we want the middle line to disappear and rotate the top and bottom lines by 45 degrees.

First, we'll add a class of `rotate-45` to the first `span`. However, we don't want the rotation to happen all the time, only when we hover over the button. If we add the `hover` modifier directly to the class, it won't work as expected. Instead, we need to mark the whole button as a group and trigger the rotation on group hover.

We also need to add a `transition` utility class to make the rotation smoother. Copy the `transition` and `group-hover:rotate-45` classes and paste them to the last `span` element, but change the rotation to `-rotate-45`.

```html
<button class="group h-20 w-20 rounded-lg border-2 border-black">
	<div class="grid justify-items-center gap-1.5">
    <span class="h-1 w-8 rounded-full bg-black group-hover:rotate-45">/<span>
    <span class="h-1 w-8 rounded-full bg-black">/<span>
    <span class="h-1 w-8 rounded-full bg-black group-hover:-rotate-45">/<span>
  </div>
</button>
```

Our current design looks more like an arrow than a cross. We want our sticks to cross in the middle, so we'll need to translate them vertically. We'll do this by modifying the first `<span>` with `group-hover:translate-y-2.5` and the last one with `-translate-y-2.5`.

Next, we want our middle stick to disappear, but instead of hiding it, we can make it scale horizontally to zero. This will create a nice squashing effect. To achieve this, we'll add `group-hover:scale-x-0 transition`.

```html
<button class="group h-20 w-20 rounded-lg border-2 border-black">
	<div class="grid justify-items-center gap-1.5">
    <span class="h-1 w-8 rounded-full bg-black transition group-hover:rotate-45 group-hover:translate-y-2.5">/<span>
    <span class="h-1 w-8 rounded-full bg-black group-hover:scale-x-0 transition">/<span>
    <span class="h-1 w-8 rounded-full bg-black group-hover:-rotate-45 group-hover:-translate-y-2.5">/<span>
  </div>
</button>
```

Now let's slow down the transition `duration-[3s]` on all three sticks and take a look at the result. The two bars dip up and down, and the middle bar slowly reappears. It's not perfect, but when sped up, it looks decent!

![Slower transition](https://res.cloudinary.com/epic-web/video/upload/v1703108264/tips/Screen_Recording_2023-12-20_at_3.19.04_PM.gif)

We could stop here, but let's have some fun and make our three sticks look like a hamburger!

## Hamburger and Fries Design

First, we'll start with the **hamburger**. The top and bottom sticks will represent the bread buns. We'll give them both a background color of `bg-orange-400`. To make the buns thicker, we'll set the height to `h-2`.

For the top one, instead of `rounded-full`, we only want the top corners to be rounded and then a nice flat cut at the bottom `rounded-t-full`. And for the bottom one here, we'll go `rounded-b-full`.

Next, let's take care of the **meat patty** in the middle. We'll make it a little bit thicker with a height of `h-1.5` and change the color to `bg-orange-800`.

Lastly, we'll adjust the gap between the bread and the meat, as it's a bit too big. Instead of a `gap-1.5`, we'll use a `gap-[3px]`.

With these changes, our hamburger design is complete!

![final](https://res.cloudinary.com/epic-web/video/upload/v1703108245/tips/Screen_Recording_2023-12-20_at_3.31.21_PM.gif)

The final code looks like this:

```html
<button class="group h-20 w-20 rounded-lg border-2 border-black">
	<div class="grid justify-items-center gap-1.5">
    // Top Bun
    <span class="h-1 w-8 rounded-full bg-black transition group-hover:rotate-45 group-hover:translate-y-2.5">/<span>
    // Meat Patty
    <span class="h-1 w-8 rounded-full bg-black group-hover:scale-x-0 transition">/<span>
    //Bottom Bun
    <span class="h-1 w-8 rounded-full bg-black group-hover:-rotate-45 group-hover:-translate-y-2.5">/<span>
  </div>
</button>
```

And there you have it - a simple hamburger and fries design using Tailwind CSS!


Learn how to create an engaging hamburger menu animation with Tailwind CSS, improving user experience and adding a touch of fun flair.

Hamburger Menu Animation

We've designed a credit card UI, and we want to turn it from hard boring white plastic to one of these fancy transparent or rather translucent cards.

![Credit Card UI](https://res.cloudinary.com/epic-web/image/upload/v1702936756/tips/Screenshot_2023-12-18_at_3.42.10_PM.png)

```javascript
<div class="isolate aspect-video w-96 rounded-xl bg-white shadow-lg ring-1 ring-black/5">
```

Instead of a background color of white, let's give it a background of transparent.

```javascript
<div class="isolate aspect-video w-96 rounded-xl bg-transparent shadow-lg ring-1 ring-black/5">
```

That sort of sells the effect but it's almost too transparent. In the real world, the card would have some sort of opacity.

```javascript
<div class="isolate aspect-video w-96 rounded-xl bg-white/20 shadow-lg ring-1 ring-black/5">
```

The frosted glass effect we are looking for is called **Glassmorphism**. Basically, we want to give the card a texture that shows what's behind with transparency but gives it a blurry effect.

First, we try giving the card a blur `md-blur`, but that doesn't work, as the whole card became blurry. Now if we try blurring the SVG blobs `blur-sm`, the entire blob become blurry and this did not sell the effect at all.

So, we need to use a different approach. What we want to use here is not a blur filter but a **backdrop blur filter** which will apply the blur to whatever element is behind the element in its background.

Back on the credit card element, let's apply a backdrop blur:

```javascript
<div class="isolate aspect-video w-96 rounded-xl bg-white/20 shadow-lg ring-1 ring-black/5">
```

![Translucent Credit Card UI](https://res.cloudinary.com/epic-web/image/upload/v1702936757/tips/Screenshot_2023-12-18_at_3.49.56_PM.png)

Let's try to make the card transparent once again. Instead of using `transparent`, we'll use `bg-white/0`, which allows us to play around with the white opacity going forward. As you can see, even when the card is completely transparent, the backdrop blur creates a translucent plastic effect.

![Card with transparent background and blur effect](https://res.cloudinary.com/epic-web/image/upload/v1702936757/tips/Screenshot_2023-12-18_at_3.50.58_PM.png)

Now, if we play around with the level of blur. We'll start with a small blur by using `small` to something bigger, like `3xl`. You can see that by playing around with the blur levels, you can give different textures and thicknesses to your card. Feel free to experiment with the values!

In this case, we'll settle for `xl` or even `lg`. To give a tiny bit of white opacity back to the card, let's use `white-10`. By adjusting the background opacity and blur level, you can achieve various effects. Keep in mind that the final appearance also depends on the background color behind the card.

![Card with adjusted blur and opacity](https://res.cloudinary.com/epic-web/image/upload/v1702936756/tips/Screenshot_2023-12-18_at_3.52.53_PM.png)

For instance, if our whole page background was `indigo-600` instead of `indigo-200`, the card might not look that great. In this case, you could adjust the opacity to `white-60` and reduce the blur to `sm`.

![Card with different background color](https://res.cloudinary.com/epic-web/image/upload/v1702936757/tips/Screenshot_2023-12-18_at_3.53.35_PM.png)

Finally, just for fun, let's go back to a `3xl` blur and make the card completely transparent. This creates a striking effect with a wide blur cast.

![Card with 3xl blur and transparent background](https://res.cloudinary.com/epic-web/image/upload/v1702936757/tips/Screenshot_2023-12-18_at_3.54.08_PM.png)


Learn how to create glassmorphism effects using the backdrop blur in Tailwind CSS and achieve realistic translucent credit card designs.

Creating Glassmorphism Effects with Tailwind CSS

Take a look at this video transcript where we explore the concept of automatic browser request cancellation. Discover how the browser handles canceled requests and why it's not possible to cancel a request once it's sent to the server. Learn how Remix, a web development tool, simulates browser behavior and handles race conditions and data updates. Find out how to prevent form resubmissions and navigate effectively. Dive into the world of modern web development and understand the intricacies of automatic browser request cancellation.

Discover how automatic browser request cancellation works and its implications for web development.

Automatic Browser Request Cancellation

In this video, we explore how to make an image uploader a progressive enhancement piece rather than a feature that only works with JavaScript enabled. We discuss the user experience for users without JavaScript, the clever solution of using a combo box, and the implementation of a class name on `<html>` to allow you to style things appropriately based on whether the user has js enabled. We also address the issue of hydration errors and provide a (safe) hack to ensure the correct HTML is served and hydrated. Most of us don't need to worry about supporting users who disable JavaScript, but if you do have that requirement, the solution here is pretty straightforward. Inspired by [@jjenzz](https://twitter.com/jjenzz/status/1720939490233946300)

Feel free to check out [the Epic Stack example](https://github.com/epicweb-dev/epic-stack-example-has-js-class) to dive into the code.

Learn how to create a progressive enhancement image uploader that works for users with or without JavaScript.

Turn Progressive Enhancement up to 11

We've got this theme switcher that changes the theme when clicked, using cookies for managing the theme. We use optimistic UI to avoid waiting for a network request. Remix version 2.2.0 introduced fetcher keys, making it easier to determine the theme when the request is successful. This opens up possibilities for Remix and Fetchers. Check out the video for more details.

Discover how to use fetcher keys in Remix 2.2.0 for optimistic theme switching with cookies. Improve user experience and eliminate network delays.

Use Fetcher Keys for Registering Remix Fetchers

In this video, we explore the limitations of using HTTP methods other than GET and POST for form submissions. The browser can only handle GET and POST requests, which can lead to issues when using methods like DELETE. We discuss how this can affect the user experience, especially on slow network connections. We also provide a solution using progressive enhancement and distinguishing form submissions based on the data. If you're a web developer, this video will help you understand the importance of sticking to GET and POST for form submissions.

Learn about the limitations of using HTTP methods other than GET and POST for form submissions and how it can affect the user experience.

Only use GET and POST

In this video, we explore the order of operations for evaluating JavaScript modules on the web. We go through the different files and console logs to understand when and where each module gets evaluated. From the server index to the entry server and client, we trace the flow of evaluation. We also discuss the evaluation of scripts and the difference between server-side and client-side evaluation. If you're interested in understanding the order of JavaScript module evaluation, this video is for you.

To learn about another inline script use case, watch [Use Client Hints to Eliminate Content Layout Shift](https://www.epicweb.dev/tips/use-client-hints-to-eliminate-content-layout-shift).

Discover the order in which JavaScript modules are evaluated on the web. From server index to entry server and client, we trace the flow of evaluation.

Understanding the Order of JavaScript Module Evaluation on the Web

One common question I get about the global styles that we've got here is why don't we just do this sort of thing for everything? These styles get brought in thanks to the CSS bundle href. The reason that I don't recommend doing this is because now that they're all in the same file, the cache for all of them is busted together. It's also better to use separate style sheets for better control over the order of styles. This transcript provides insights into the drawbacks of bundling all CSS files together and why it's recommended to use separate style sheets.

Discover the drawbacks of bundling all CSS files together and why it's recommended to use separate style sheets for better control and performance.

The Drawbacks of Bundling All CSS Files Together

In this tip, Kent gives you a tour of the Epic Workshop App so you know the very best way to work through the workshop material.

Get Started with the Epic Workshop App

In this video, Kent fixes a bug in the Epic Stack onboarding form submission by ensuring the `transform` does not run when the form's `intent` is not `submit`. Side-effects in Zod + Conform submissions should only happen when the form is actually being submitted (as opposed to simply validated).

Learn more about form transforms with [Transforming Form Data into Sessions: A Look into Zod and Conform](https://www.epicweb.dev/creator/tips/use-zod-for-all-form-validation).

Learn how a web developer fixed a form validation bug in the Epic Stack. Follow their step-by-step guide and find out how they addressed the issue.

Fixing a form validation bug in the Epic Stack

In this video, Kent takes a detailed look at transforming form data into sessions using Zod and Conform. He addresses a specific challenge in handling optional login sessions and presents a solution that integrates a `.transform` step. This asynchronous function validates and converts the username and password into a session, seamlessly fitting into existing Zod schema validation. By the end of the video, Kent ensures that the parsed data is completely validated and ready to use, eliminating the need for additional validation steps. The video aims to offer valuable insights, whether the viewer is a Zod and Conform user or not.

Learn how to use Zod and Conform to validate and transform form data into sessions

Use Zod for All Form Validation

In this video, Kent C. Dodds demonstrates how to add OpenID Connect authentication to the Epic Stack. He walks through the authentication flow, shows how to manage connections, and discusses the implementation process. If you're a web developer looking to integrate OpenID Connect into your stack, this video provides a helpful guide.

Find the repo at [github.com/epicweb-dev/epic-oidc](https://github.com/epicweb-dev/epic-oidc).

Learn how to integrate OpenID Connect authentication into the Epic Stack with this comprehensive tutorial.

Adding OpenID Connect Authentication to the Epic Stack

The Full Stack Workshop Series Volume 1 is an exciting and sold-out event that offers a comprehensive learning experience for web developers. In this workshop, you will receive detailed instructions and resources to ramp up your skills in various areas of modern web development. The workshop provides a step-by-step guide to setting up your local environment, working with the provided codebase, and completing exercises in the Playground directory. You will also have access to the KCD Workshop app, where you can navigate through the exercises, view instructions, compare solutions, and open relevant files in your code editor. The workshop encourages active learning and includes exercises, elaboration, and feedback forms to enhance your understanding. Join the Discord channel to connect with other participants and ask questions. Additionally, the workshop takes place in Gather, a virtual space that simulates an intergalactic workshop area, allowing for a more immersive and interactive experience. Don't miss out on this opportunity to level up your full stack development skills!

Full Stack Workshop Series Volume 1 and enhance your web development skills. Get step-by-step instructions, resources, and hands-on exercises to level up.

Preparing for a workshop with Kent C. Dodds

Users of your website can customize their device to a dark or light theme. As a web developer you're in control of everything visible within the viewport, but your control outside of that is limited. The favicon for your website should be appropriate for the user's system preference.

Learn how to customize the favicon based on the user's system preference for light mode. This builds on top of the work we have in the Epic Stack for Client Hints (learn more from ["Use Client Hints to Eliminate Content Layout Shift"](/tips/use-client-hints-to-eliminate-content-layout-shift)).

Create a responsive favicon that adapts to the user's system preference for light or dark mode.

Support Responsive Favicons for a Professional Look

One of the [guiding principles](https://github.com/epicweb-dev/epic-stack/blob/main/docs/guiding-principles.md) of [the Epic Stack](/epic-stack) is "Include Only Most Common Use Cases" which means we're limited in the amount of things that can be built into the stack. That makes it critically important for examples to be created so people can easily determine what changes are necessary to integrate services and libraries with their Epic Stack applications.
In this tip, Kent will show you the process for adding an example to the Epic Stack so you can both help others learn how to complete the integration and also demonstrate how the integration works to potentially have it included by default. This is the very best way to get something built into the stack.

How to create an Epic Stack example to help others and get new features built into the Epic Stack.

Kent shows how to create an Epic Stack example by adding CSRF protection to the user profile page.

Contribute an Epic Stack Example

Kent C. Dodds: [0:01] You want to get something into the Epic Stack. The best way to do this is by creating an example first. Demonstrate why the change that you want to have happen makes a lot of sense and demonstrate how to make that change happen.

[0:14] The benefit of doing this is that even if it doesn't end up making it into the Epic Stack, at least you'll be able to demonstrate to other people how they can integrate your service or how they can use your library or whatever it is.

[0:27] We're going to do this by adding CSRF protection to our forms in the Epic Stack. Then maybe, eventually, that will land as a built-in part of the stack. I want to show you how to create an example that is really effective at demonstrating to myself and to others why the changes that you want to make are a good idea and how to make those changes.

[0:55] We'll follow the instructions here. We're going to create a new Epic Stack application. By doing this, we'll go into our terminal right here. We'll say create this Epic Stack app. Let's open this up here. Let's call this epic-stack-with-csrf, or you could say, "csrf-example," whatever.

[1:26] There's this "with" prefix that is not important. I don't really care what you call this repo. This is going to be on your own GitHub repository when it's added to this. Have it be whatever you want it to be. It's fine.

[1:41] We'll speed this up here really quick. Because this is just an example and we don't really care to have it deployed -- it doesn't actually need to be deployed to be a useful example -- we're not going to deploy it. I'm just going to say no here.

[1:56] Now, the first thing that we're going to do is we'll say, "cd" into our epic-stack-with-csrf. We'll look at our git status. It's not a git repo. We're going to git init. Now we'll git add everything and commit with init.

[2:14] This part is actually really important because it allows people to see just the changes that you made to the Epic Stack to add your features. We want to make an initial commit right after we've set up the repo.

[2:29] Then we're also going to open up our editor right here. Because we don't actually want to deploy, we're going to turn off the deploys right here. Let's just comment this out. We'll add another commit, git commit disable deploys. You could also do that as part of your init commit if you want to. That's not all that important there.

[2:55] Just the point is that you want to make sure that there are very specific commits that are relevant to the changes that you're making. You could even make multiple commits for each step if you want to, but for this particular example, we'll just make a single commit.

[3:09] As interesting as this is, I'm actually going to skip this for us so that you can skip to the end. At this point, you're just going to make whatever changes you need to make for your example to be working. Then you'll join back up with me when it's time to do your docs.

[3:23] Once you've finished, you want to make sure of two things. One, that you've only changed as much as necessary for your specific example. Don't add a bunch of tangentially related things because it could distract from the main purpose of the example. Try to focus on what the example is actually demonstrating.

[3:40] The second one is make sure that you're actually testing the changes that you're making. If that involves writing automated tests, then that's awesome. If that involves running the automated tests that we have, also awesome. There should be GitHub workflows for running the automated tests as well. That's helpful too.

[4:00] Then, of course, you want to manually test things to make sure that things are working. Once you've verified that everything has changed the way that you want to, you can take a look at the git diff and make sure that you haven't changed more things than you actually expect.

[4:12] Then you can write some documentation, just a little bit of an explanation of what the example is all about. If you take a look at the existing examples that we have, you can see that the documentation does not have to be really well spelled out or anything necessarily.

[4:30] It just needs to be relatively basic on the steps needed to accomplish the task because a lot of the benefit actually comes from people looking at the commit history and saying, "Oh, OK. So here is the commit, and here are the things that they changed to bring Framer into the Epic Stack," for example.

[4:49] For us, we're just going to delete all of this stuff. We'll give this the title of "Epic Stack with CSRF Protection." Then we write out some documentation, which I will do now. Awesome. Now we've got the docs. This is just enough for people to be able to follow along, look at the commit history, and see the changes that were necessary.

[5:11] In some cases, that might be quite a bit, especially if it involves infra stuff so you need to set secrets and stuff. In other cases, it's just a couple simple steps. Whatever it is, you have the documentation that makes it easy for people to integrate and also easy for me to take a look at and determine whether I want to bake that into the Epic Stack as a built-in part of the stack.

[5:32] Now we simply need to create a repo. You can go to repo.new and create the repository here. We're going to call it epic-stack-with-csrf. This will be under myself. An example of the Epic Stack with CSRF protection on forms. Then we create that repository. We follow the instructions for pushing an existing repository.

[6:04] Let's make sure we look at the status, git add everything. We'll commit this as "Add CSRF protection with remix-utils." Then we can copy this and paste that. Now we've got the Epic Stack with CSRF on here.

[6:23] Another thing that you should do is add a topic for the epic-stack and epic-stack-examples, or example, singular. Because what this will do is it will add your example to the topic on GitHub so that people can look at this topic and see all of the examples really easily, in addition to those that are listed in the examples docs on the Epic Stack.

[6:49] The last step is to come into the examples and just hit the little pencil icon. This will fork the repository for you and simply add another line to the bottom of this. Now we'll commit the changes. For you, you're going to be committing to your own repo. I'm going to create a branch to kind of simulate that sort of thing. You can feel free to elaborate here if you like.

[7:15] For examples, I can just kind of look at things and know. No test plan is necessary. The checklist doesn't matter. Screenshots would be useful for different things. In our case, the CSRF thing, there's nothing really to screenshot. Definitely useful if what you're doing involves some sort of UI or some terminal output. Something like that could be very useful here as well.

[7:39] I'm going to just clear all that out. We'll just create the pull request. Then you'll get it merged. Then I'll come in here. I'll merge it. I'll be like, "Thanks. You're awesome."

[7:47] Thank you for taking the time to create an example. It helps a ton, just an enormous amount, for me when evaluating different things that I want to have built in and for other people who want to be able to use those things today without waiting for it to get built in. I hope that helps. Thank you so much. We'll see you later.


More and more people are finding adding additional layers of security for their applications is a must. Two factor authentication is a standard security measure for applications to help users be more secure when logging into your application or when performing important or destructive operations. That said, it's nontrivial to build.
So it's included by default in the Epic Stack! Check out the user workflow for this feature that's increasingly becoming table stakes for modern web applications.

A Two Factor Authentication implementation has been added to the Epic Stack. Check it out!

Kent shows us the workflow for the new two-factor authentication support in the Epic Stack.

Two Factor Auth is Included in the Epic Stack

Kent Dodds: [0:00] The Epic Stack now has two-factor authentication built in. If you create a brand-new Epic Stack project and then go login, we have a seed script that creates a user called, Kody. I'll log in as Kody, Kody loves you.

[0:13] Login and now if we go to Kody's profile and go to edit profile, we can click on Enable 2FA, two-factor authentication. Here we can read about what that is all about. We click on Enable 2FA and now it's going to give us the QR code, it gives us the long passcode that you would expect. Of course, this will be your domain name, it won't be local host, all of that.

[0:37] Here, I've got one password. I'm going to edit this and we'll add a one-time password. With this I can actually just click this to scan the QR code that's on the screen. We'll save that and now I've got a one-time password. I'll copy that and paste it right here, hit confirm and now we have two-factor authentication enabled.

[0:58] Now, if I come out of my user account and log in again, Kody and Kody loves you, it's going to ask me for my two-factor authentication code. Awesome! I'll copy that, paste it over here, confirm and I'm allowed in. Then of course we can always disable it if we decide we don't want to have two-factor authentication anymore.

[1:20] All of this entire workflow is completely tested with an end-to-end test. As you work on the Epic Stack and add features and things, you can know that you're not going to be breaking this important workflow for a super secure Epic Web Application. Hope that helps! See ya!

When a user creates a new account with their email address, we want to verify that email address belongs to them. That way if they ever need to change their password or we need to communicate with them about something we know we've got the right address for them.
But to verify the user's information can be tricky. We can send them something and have them send it back to us, but we need to make sure that what we send them is random enough to not be guessed, simple enough to be typed, and only valid for a short period of time.
[The Epic Stack](https://epicweb.dev/epic-stack) used to generate an encrypted token, but there are limitations and vulnerabilities associated with doing this. So now the Epic Stack has adopted a new pattern called "Time-based One Time Passwords."
Learn more about what went into the decision here (along with [the ChatGPT AI conversation](https://chat.openai.com/share/a1bbd00d-c9d7-4846-a9af-12c6a475cd20) that aided in making this decision) by reading the decision documents for the [Email Code](https://github.com/epicweb-dev/epic-stack/blob/main/docs/decisions/013-email-code.md) and the [Time-based One-time Password Algorithm](https://github.com/epicweb-dev/epic-stack/blob/main/docs/decisions/014-totp.md).

Watch Kent show you the improved user experience, security, and the implementation of Time-based One Time Passwords in the Epic Stack.

Learn about the improved user experience, security, and the implementation of Time-based One Time Passwords in the Epic Stack.

Improve UX and Security with Time-based One Time Passwords (TOTPs)

Kent Dodds: [0:00] I had a big long conversation with ChatGPT about the merits of the authentication system in the Epic Stack, and how we validate user emails, and I changed. The way that we used to do it is encrypted payloads, an encrypted token with a magic link. Now, we're using a time-based one-time password.

[0:22] First off, I decided I wanted to make things a little bit easier for users to submit the one-time password thing. We send them a six-digit thing that they can type in instead of a magic link that they have to click. Benefit of that is, they don't have to have two different tabs. One, where they requested the link, and then next, where they clicked and open the link.

[0:47] That's nice. It's also helpful if the device that you're opening the email in is separate from the one that you want to sign in. That was an accepted decision that I decided.

[1:04] In doing that, I decided, I also should probably secure up the way that we do email verification in the first place because we are susceptible to rainbow table attacks and other brute-force related attacks that could potentially leak our encryption secret.

[1:23] Which is unlikely, but could definitely happen. We're also open to disgruntled employee attacks and stuff like that. By switching to a time-based one-time password algorithm, we sidestep those issues.

[1:40] You can read through the decision documents to get a little bit more background on this. Of course, I do link to this entire conversation with ChatGPT where I'm weighing the different trade-offs. I'm really close to saying, "Forget it," and then decide to go back and forth. It's pretty interesting conversation. Feel free to read through that.

[1:59] I want to show you what the user experience looks like now. I go to login. Of course, you have to have the server running, npm run dev. Let's go to the home page again. I go to login. I am an existing user. That flow has been unchanged, still username and password. That's going to be the same.

[2:22] The new flow comes into creating an account and "Forgot Password." Let's create an account first. We're going to say, jenny@example.com. We'll submit. That will send us to this new page. This page did not used to exist, it used to just say, "Check your email and then click on the magic link."

[2:42] Now, we go to a /verify that has the email and the URL. We're supposed to enter the code right here. Then we received an email here. During development, it is marked out, and we just log the email to the console. We have both the text and HTML form.

[2:58] Here in the text, we can see that is our code. We can copy that and paste it right here. Then we go submit and now we can go through the onboarding process. That is unchanged, same thing.

[3:12] If we go to forgot password...Actually, let's do create account again and say, jenny@example.com. We submit. We'll have a new email with a new one-time password. We also have this link. This will pre-fill the code as a URLSearchParam. I'll copy that and paste that in place. That will instantly verify and redirect us.

[3:39] Now, if that one-time password is already been used, then that's not going to work. It will say, "The code is invalid." If it's a completely invalid code, then that will also say, "It's invalid." All of the typical things that you would expect work in the scenario. Trying to use somebody else's code with a different email address is also not going to work all of that stuff.

[4:05] All right, let's take a look also at forgot password flow. If I say, username or email. We say, Kody, that's the username. It's important that we keep the username or email here rather than resolving this to a common thing, like username specifically or just email.

[4:23] The reason for that is if we resolved it to email, for example, then somebody would be able to find a user's email address by typing their username in here. Then vice versa, if you had their email address and want to find out what their username was, you could use this. You don't want to do that. We keep the ambiguity of username or email here.

[4:46] It's nice to be able to provide either username or email because this means we also don't need to have a "Remind me of my username. I forgot my username" thing. You just give us either one of those and we'll send you the email.

[4:59] We will have gotten that email here. Again, we can click on this or we can type this in. We type that in and submit. Now, we can do the password reset. There we go. Now, I can authenticate and we're logged in. That is the user experience for the flow.

[5:24] The way that this works is also interesting. The way that we do that is we have this util here. Let's start from the route. If we go to our auth routes and we go to our signup. Then in the signup, we have...Of course, the UI is just a form. Nothing interesting there. The action we're parsing the form, like we do with our regular conform and Zod schema and stuff.

[5:53] The interesting stuff comes in right here. First of all, we want this OTP, this one-time password to be valid for 30 minutes. That's pretty long for a one-time password, but for this type of experience, I think 30 minutes is perfectly reasonable because this is a generated project for you. If you disagree, you can always just change this. It's very easy to do.

[6:16] 30 minutes is our default here. We generate the TOTP, the time-based one-time password. You can dive into that and look at the implementation. This is all custom implemented based heavily on the NOTP, which was great, but it only supports sha1.

[6:37] That is not great. The maintainer is not actively responding to stuff. Anyone can feel free to make this as an open-source package. I definitely welcome that. This was copy, paste, and modified and improved based on that package.

[6:54] GenerateTOTP, generate an HOTP, an HOTP is a HMAC-based one-time password. For us, we want it to be time-based, because that means that it, by design, will expire after the validSeconds that you provide here. We can even keep it in the database indefinitely and once that validSeconds time has passed, there is no way for that thing to be valid anymore. That's one of the benefits of a TOTP.

[7:29] The TOTP is based on the HOTP. We generate our counter based on the number of seconds we want to be valid for. We generate a random key and then we return that random key, the algorithm that was used, the number of validSeconds, and OTP value itself. We use those to create a verification.

[7:51] First of all, we have a unique constraint, if we look at our schema.prisma. We have a model for verification and we have a unique constraint on the verificationTarget, and the type. That means it's impossible for a user to have two OTPs for the same email, for example, because that wouldn't make any sense and there could be a bit of confusion if they had multiple.

[8:16] That's why we instantly delete many of these. Delete all of the ones that have the same verificationType and the verificationTarget. Our verificationType is onboarding, and the target is their email. The thing we're trying to verify is the email.

[8:35] We create a new one with that type, that target, the algorithm that was used to create the TOTP, and the secret that was generated to create that one-time password, the length of time that it's supposed to be valid, and the one-time password itself.

[8:54] Then we redirect the user to the signup verify page with their email that they typed in. They provided that to us and we send them to the verify page with that prefilled in, because that's one part of the OTP.

[9:13] You can't give a random number and have it signed you in as whatever user-provided or has that OTP number. That doesn't work. You have to have both of them. We prefilled that because you gave that to us. That's what's going to be our redirect URL.

[9:32] Then we add the OTP to the email that we're going to be sending. We give them the OTP directly and then also give them the URL that they can click and have that prefilled in. Now, they have the option. They can do one or the other, and it will work just as well. If it was successful in sending the email, then we redirect them and they can continue on.

[9:55] Now, once they land on the signup verify page, in our loader, we're first going to check if it has the OTP in the query parameters. If it does, then they probably clicked on the magic link and here they are.

[10:09] If it does, we're going to do the regular validation that we'll look at in a second. If it doesn't, then we'll return the form in an empty state so that the user can fill in the missing pieces.

[10:22] The form, there's nothing too interesting about the form here. It's a just regular conform thing going on here. When the form is submitted, that is going to go into our validate logic. We run through that validate logic, when they land on the page, if they have both of the pieces of information. If they don't, we wait for them to submit the form.

[10:45] If they're submitting the form that's coming from formData, if they are landing on the page that's coming from the URLSearchParams. In either case, the logic is the same.

[10:52] Here's regular conform, validation staff. We have a superRefine on our Zod schema that will go check the database for a verification that matches the email and the code.

[11:06] We grab the pieces that we need to verify that code. If there is no verification, maybe the verification was deleted, they're using an old code or something like that, then we'll say, "Invalid code."

[11:18] We're not going to give them any more helpful information there, because why would we? It would probably be useful if we say, "Have a little thing, request another code," or something. As far as the validation is concerned, it's not concerned with that.

[11:34] Assuming there is a verification in the database that matches the OTP that they gave us and their email, then we're going to verify it with the OTP that they gave us, and the secretKey that we stored in the database.

[11:52] We're going to make sure we use the same algorithm and the same valid number of seconds. That's also an important input here. Then we have the window set to 50 because I was testing something. This window should be set to one.

[12:09] OTPs are used for one-time passwords for Google Authenticator or 1Password, wherever the thing you scan the QR code, and you get a new password every 30 seconds.

[12:21] When you have something like that which we will in the future, you can end up with a situation where the clock that...The one-time password depends heavily on the clock. If the clock on the server and the clock on the device is off a little bit, then the one-time password can also be off and that's not great.

[12:43] The window means, "I'm going to be valid for this length of time, but also for the previous length of time as well." That way you can account for that clock drift. You normally don't want to have much more than three in there, but it depends on the situation.

[12:59] In our case, we are both the client and the server. The server is acting both of those roles. We don't need to worry about clock drift. That's why we can say window of one for this specific usage.

[13:13] If there's no results then the code was invalid, it is not verified. We're going to add that issue. Otherwise, we don't add any issues and things are hunky-dory. Awesome. That's the integration with Zod here and all of its type-safe and it's amazing.

[13:30] If we are doing a validation as the user is typing in stuff, that's where this can come in. We handle that case, if there is no value at this point, we know there was an error. We'll send the submission back, which will include all of the errors.

[13:47] If we get past that, then we know that things are valid and we have a value. We're going to delete the verification from the database and then we'll go into the session and add the onboardingEmailSession, so we know which user is being on-boarded in this process. What email it is that they have? They verified this email, this is theirs. Now, we can onboard them with that email.

[14:12] That is the entire process. The forgot password is very similar thing. We create that one-time password right here and send that as part of the email and everything. When they land on this page, we can check it in the loader, as well as in the action, if they manually type it in.

[14:36] You might be looking at this and thinking, "There may be an abstraction there and it's possible." There is a good one. I did play around with it for a second and it didn't feel we're quite there with a nicer abstraction. It's nice to be able to customize this very specifically.

[14:53] That is the one-time password support in the Epic Stack. It is awesome and paving the way for us to do two-factor authentication. I hope that you give this a shot in your own applications. It strikes a great balance of security and ease of use like complexity. I feel confident about it and I hope that it's helpful to you. See you.

Sometimes our components need to render something that's only known by the client. For example, what the user's preferred color scheme is or their timezone offset. So when the server wants to render, we're stuck guessing and if we guess wrong the user will wind up with a bad Content Layout Shift which is a bad user experience and reduces their confidence in our app.

[The client hints](https://github.com/epicweb-dev/epic-stack/blob/main/docs/decisions/005-client-pref-cookies.md) feature in [the Epic Stack](https://epicweb.dev/epic-stack) allows you to communicate these values from the client to the server following the pattern established by the (work in progress) standard. By using cookies for storing these values, you can ensure the server will know the proper values at server render time so you can take the user preferences into account.

Even if you're not using the Epic Stack, Remix, or even React, you can apply this same setup to your own Web app.

Learn how to eliminate CLS using client hints in the Epic Stack.

Kent's going to show you how to respect the user's reduced motion preference even on the server render using the client hints feature in the Epic Stack.

Use Client Hints to Eliminate Content Layout Shift

Instructor: [0:00] The Epic Stack just added support for client preference cookies. What is this? Basically, it's an implementation of a new standard that's coming and being worked on for the server to be able to tell the client it needs some additional information before it can render.  
  
[0:18] If you want to make a really awesome user experience, you want to server-render something, and then when the client takes over and adds event listeners and stuff, it doesn't actually need to change anything. If it does, then it's going to result in a really bad content layout shift and it makes for a really poor experience.  
  
[0:35] Examples of this are a flash of the incorrect theme or a time zone problem where it renders some time on the server and then on the client is in a different time zone so it renders a different time. Things like that can be a real problem. The browser can't just send all of the user's information to the server because there could be a lot of things that the server doesn't care about.  
  
[0:59] The way that this standard works is the browser will say, "Hey, I want to get this resource," and then the server will say, "Oh, before you can get that resource, I need a couple extra information." It sends a response back. The browser says, "OK, cool, I'll send you that information," and then the server can send the correct response with the details that now the server needs.  
  
[1:21] This works out really well. We've implemented an inspired feature. It's not exactly the same sort of thing. In fact, when the standard is finished, we'll probably keep our implementation because it does have some benefits on top of that. Just a couple improvements, and so we'll probably keep our thing around. It is definitely inspired by this sort of thing.  
  
[1:46] Let's take a look at an example. Let's say that I'm building something for the Epic Stack and I want to have this cool fade-in transition. This is actually something that I do on my website and I'm using a tool called Framer Motion that allows me to build some really awesome animations that would be extremely difficult to do if I were just using CSS.  
  
[2:08] There are some situations where using regular CSS is just not going to quite do it for you. I need to do this in JavaScript. The nice thing is that there's a useReducedMotion hook with Framer Motion. We can take that reducedMotion and determine whether we want to have the motion props on here at all.  
  
[2:33] If I have prefers-reduced-motion reduce, if I've configured that in my browser, then I navigate over here and it doesn't do that motion. If I turn that off, then it does. We can respect the user's preferences.  
  
[2:51] The problem is that this is only known at the client render time. If I turn this off and then do a refresh, then the server thinks that it's going to animate this in, so it renders it as invisible. The client doesn't animate it because the user says, "I want to prefer reduced motion." This is a bit of a problem. This is what the client hints is supposed to solve. Let's solve this using client hints.  
  
[3:19] We've already implemented the theme using the same sort of thing. We're going to do the same thing for reducedMotion. The cookie name, we're using cookies to manage these values, we'll just call it prefers-reduced-motion. Then here, the value, we're going to say no-preference.  
  
[3:42] If that matches, then we know that we do not want to reduce the motion. If it has no preference, we don't want to reduce the motion. If they do have a preference, then it will be reduced. We do want to reduce the motion. Our fallback here is going to be false. We'll just default to everybody having our animations.  
  
[4:03] For the transform, what this basically means is when we put this true and false value into the cookie, that's going to turn it into a string. In our case, we actually just want it to be a boolean. We're going to say if the value is equal to true, then we know that the value should be the boolean true. This transform just turns it from the string into a value that we can use.  
  
[4:27] With that now, let's go over here, and instead of using this useReducedMotion, we'll use the useHints. useHints will return an object that has reduced motion as a property on it. We'll just destructure that. Now we can come in here and I refresh. I don't get that animation because I have prefers-reduced-motion and I also get to see the actual value itself.  
  
[4:52] If I turn this off and I refresh, then I get that nice fade-in effect that I was going for. We have this really nice capability because the browser is communicating back to the server what its preferences are using cookies. We can see in here we're dark mode and this one is our prefers-reduced-motion and that's set to true currently.  
  
[5:15] That's client hints in the Epic Stack. You can, of course, use this in whatever React or Remix project that you're using. It is a pretty straightforward thing. Feel free to reference the client hints. If you're using the Epic Stack, just stick your client hint config right in here and then you'll be able to use it all over the app with however you need to do.  
  
[5:36] Whatever you're trying to do that's user-specific for something that's only known by the browser, now the server can know all of those things. I hope that helps. Have a good one.

If you're not sure if the right font is being applied to your app, here's an easy way to check.

1. With the help of DevTools, inspect the element where the font should be applied.

2. Go to the `font-family` configuration and copy the font you want to use.

3. Create a temporary style element and paste the `font-family` configuration in it.

4. Modify the font name slightly to see if the font changes when applied to the element.

If it doesn't change, it means the custom font is not loading properly. You can quickly check the "Network" tab and see that the font file is not loading.

![](http://res.cloudinary.com/epic-web/image/upload/v1681515386/epicweb.dev/tips/2023-03-02-15-11-03_11_00-59540-this-is-an-easy-fix-we-just-remove-the-end-and-now-we-get-a-refresh-and.png)

To fix this, you can investigate if there are any typos in the font name or other configuration issues.

To confirm that the correct font is being applied, toggle back and forth between the font you want to use and another font. If the font changes when you toggle, then it's working properly.

This technique can help you quickly identify and fix any issues related to loading and applying custom fonts in your app.

Learn how to use DevTools to check if the correct font is being applied to your app and troubleshoot issues related to loading custom fonts.

Check if Custom Fonts are Properly Loaded in Your App

[0:00] Sometimes, the font that you're using doesn't look a whole lot different from the regular font, and so you're not sure whether you're actually loading the fonts that you're supposed to be. For example, I've got a font that I want to have applied to my app. I'm pretty sure that it's not applying, but I'm not positive. To find out, I'm going to select this Starport element, and then I'm going to go to "font family."  
  
[0:24] Here's the configuration for my font family that I've got here, so I'm going to copy this. I'm going to stick it up here in the style element, and then all I need to do is make a change to this. If I remove the "s," then it should actually change the font, because I just changed what that font is. It didn't change. It looks exactly the same either way, so we know that this font is not loaded.  
  
[0:48] We can actually look at that and see the font file itself is not loading properly, but this is an easy fix. We just remove the "n," and now we get a refresh. Now, I'm still not sure. Is that the right font, or is that the old thing? We're going to paste in our fonts here again, and come over here and just change it back and forth. You can see, boom, that is definitely loading the proper font.  
  
[1:16] If you're ever not certain whether the right font is being applied, or something, then you can simply set the font family to what you want it to be, and then toggle back and forth between that being enabled and that not being enabled. You should see that the font should change. If it's not changing, then you've either got a typo in the font name, or something else is misconfigured in your app. There you go. I hope that's helpful.

Whenever you run into a situation where you're having trouble seeing live updates when making changes, I find it best to try to reproduce the problem in a completely separate environment.

Here's a process you can follow to isolate these types of problems in your own project.

The first thing to do is create a new `test.ignored` directory in your project. Check that your `gitignore` configuration ignores everything with `.ignored` in the name. You don't want this test code ending up in your repo!

Next, create the minimum number of files you need in order to recreate the problem.

The idea is that you want to have enough code to recreate your problem without being overwhelmed by all of the other parts of your project.

Now you can start experimenting and testing potential solutions. This might involve running tests using a watcher for changes, or creating new components.

Once you've found the solution in your test code, bring it back over to your main application code.

After you've verified that your problem is solved in the main app, you're safe to delete your test directory.

Isolating your problem to a small example in a temporary directory is a great way to solve complex problems!

## Minimal MDX Example

In this example, I have a complicated setup involving adding interactive components to an MDX file that is being treated as plain markdown.

Inside of the `test.ignored` directory will be a minimal set of files to reproduce the problem I was seeing in the full project.

Since I'm working with MDX, I'll create a `README.md`, a `test.ts` file, and a `component.tsx` file.

The `component.tsx`  file will import React and export a simple `Counter` component to act as a stand-in for the more complex component that would be used in the real project.

```tsx
export function Counter() {
	const [count, setCount] = React.useState(0);
	const increment = () => setCount((c) => c + 1);
	return <button onClick={increment}>{count}</button>;
}
```

The `README.md` file will import the `Counter` component and use it:

```markdown
import {Counter} from './component'

This is my counter:

<Counter/>
```

Inside of the `test.ts` file, import the necessary modules and bundle the MDX:

```tsx
import path from "path";
import { bundleMDX } from "mdx-bundler";

async function go() {
	const result = await bundleMDX({
		file: path.join(__dirname, "README.md"),
	});
	console.log(result.code);
}

go();
```

On the command line, I'll run the command `tsx watch ./test.ignored/test.ts` and check the output. If the MDX is not processed correctly, make changes to the configuration options.

![](http://res.cloudinary.com/epic-web/image/upload/v1681514520/epicweb.dev/tips/2023-01-25-14-11-53_41_03-36280-oh--ok--thats-interesting.png)

In this case, we need to define `'process.env.NODE_ENV'`

```tsx
process.env.NODE_ENV = "development";
```

![](http://res.cloudinary.com/epic-web/image/upload/v1681514598/epicweb.dev/tips/2023-01-25-14-11-53_47_04-03160-you-dont-see-any-all-caps-exclamation-points.png)

In addition, I need to add `options.mdxExtensions` to the `MDXBundler` to treat `.md `files as `.mdx` files, and add `options.format` to force the format to be `mdx.`  Optionally, `development` can be set to `false` to remove debugging helpers:

```tsx
mdxOptions(options) {
    options.mdxExtensions = ['.mdx', '.md']
    options.format = 'mdx'
    options.development = false
    return options
}
```

By creating a smaller example with less moving pieces, I was able to track down the configuration issues with my MDX processing.

The next time you run into a problem and you have no idea what could be causing it, try moving to a separate environment and slowly add files until you've reproduced the issue.

With fewer moving parts, you can more easily identify and resolve issues much faster than in the complexity of your full project.

When faced with a complex problem, try isolating it by creating a minimal example in a temporary project directory.

Use Isolation to Solve Complex Problems

[0:00] I've got a Markdown file here that I want to treat as MDX so I can have interactive counter components or whatever other components that I want in the instructions for the workshops. As you can see here, that's not being processed as MDX.  
  
[0:16] This is just being treated as Markdown, and if you dive through this, you can see where that is being treated as just like a regular string, rather than being treated as MDX, which I want it to be. I've got this whole, big setup here and this compile-mdx.server with a bunch of plugins and all of this stuff, even caches and stuff.  
  
[0:37] It's really difficult to work in this. Whenever you run into a situation where it's difficult to make changes and see your changes live and everything, I find it's always best to try and reproduce the problem that you're having in a completely separate environment, and then you have fewer moving parts.  
  
[0:58] What we're going to do is, I'm going to come down here. We're going to make a new directory called test.ignored. That's my global gitignore, just ignores everything that has a .ignore in the file name. Inside of this, we're going to make a test.ts, and we're going to also make whatever else we need.  
  
[1:18] In my case, I need a README.md and also, let's see, a component.tsx. I'm going to make a counter component to export that. We'll import React and then in my README, I'm going to import the Counter from the component, and we'll say this is my counter, Counter. All right, great.  
  
[1:53] That should work with what I'm trying to do, and then we'll make our test. We'll say import path from 'path' and bundleMdx. No, that's not it. mdx-bundler, and we'll make a function, because I can't use top-level await because these aren't native ESM. If it was native ESM, you don't need to make this go function. You just do await at the root.  
  
[2:25] Now, I can say bundleMdx. I think bundleMDX in [laughs] all caps, and we'll say file: path.join and I'm going to say _dirname. That will go right there, _dirname. We're actually going to be processing the README.md.  
  
[2:49] You take as few of the pieces of your actual code as possible to reproduce the problem. You narrow the problem down as much as possible. We'll get our result from that await, and then we'll console.log the result.code.  
  
[3:06] You know what, another thing that we'll do is in here, we'll make it obvious when it has been processed properly by adding a bunch of exclamation points. Now, we're going to run tsx watch ./test.ignored/test.ts. Let's move this out of the way and take a look at what we've got here.  
  
[3:32] Expected value for process.env. That's interesting. I could rerun the script with setting the app, but we'll say process.env. NODE_ENV= 'development,' which is what I'm running when I'm running my server.  
  
[3:47] That's kind of weird that it requires that, but that's OK, because I add that additional aspect to my actual environment until I get to the point where I'm reproducing the problem. I am reproducing the problem.  
  
[4:00] You don't see any all caps exclamation points, and in fact, there's the import right there. [laughs] This is not great. Now, we can go through docs and different configuration options, and I'm going to skip all that because I actually did that already.  
  
[4:19] The thing that's going to fix this for us is there's this mdxOptions (options) with mdx-bundler, and options.mdxExtensions. We need to treat our Markdown files as MDX. Actually, one other thing that we could do before we get to this is, let's test a theory that if this were an MDX file, that it would be treated as such. Boom, there it is.  
  
[4:47] All we need to do is tell our mdx-bundler or MDX that we need to treat .md files as .mdx files. Now we can switch this back to an .md. We switch this to .md. Of course, we need to return the options there. Oh no, it's still not giving us all those exclamation points in here.  
  
[5:12] The other thing that we need to add is options.format, and we're going to force it to say, "Hey, I want the format of this thing to be MDX." That's going to force it, and now we are solid.  
  
[5:25] Then the other thing that actually bothered me is I saw this fileName stuff in here. In production mode, that is all going to get removed, because these are debugging helpers and stuff. For my use case, I actually don't want that, and so I also am going to add development is false, and I can very quickly see, those are all gone.  
  
[5:50] I'm able to take this now over to my actual source code and add the pieces that were just the couple of lines that make all of the difference, and now I can come over to my running app, and indeed, it does run, and I can tab over to the button and, boom, boom, boom, boom, boom, boom. The button is totally working, so huzzah.  
  
[6:11] Next time you run into something that is there's so many moving pieces you have no idea what could be causing the problem, try to move to a separate environment and slowly add, add, add until you've reproduced the problem, and then you can work within that environment. It's way, way faster.  
  
[6:28] I hope that helps. Have an awesome day.

Sometimes modules can end up in your client bundle when you don't want them to.

For example, the Zod library isn't needed by the client so there's no reason to ship it.

There are a couple of ways to find out if you're including unnecessary modules in your bundle.

## Using `source-map-explorer`

One of the most popular ways is to use `source-map-explorer`, which generates a visual representation of your build's source maps.

In this case, we can see that Zod is present in the bundle:

![](http://res.cloudinary.com/epic-web/image/upload/v1681513645/epicweb.dev/tips/2023-01-11-14-08-31_5_00-22440-what-is-in-that-source-map.png)

This tool gets the job done, but there's a quicker alternative without going through as much trouble.

## Modifying the Module in `node_modules`

Adding a `console.log()` statement to the specific module you're interested in will let you know if it ends up in the client-side bundle.

Since I'm interested in Zod, I'll open its `package.json` inside of the `node_modules/zod/` directory.

Inside of `package.json`, find the `module` property.

In this case it's pointing to `./lib/index.mjs`.

Remix and most other bundlers reference this file when building the production application, which is often in the `lib` folder with an `.mjs` extension.

Open the `./lib/index.mjs` file from `package.json` (which has a full path of `node_modules/zod/lib/index.mjs`).

At the top of the file, add a long `console.log` that will be noticeable in the console:

```typescript
console.log('zzzzzzzzzzzzzzzoooooooooddddddddddddddd');
```

Save the changes to the `index.mjs` file.

## Check the Console Output

To check your work, trigger a rebuild by saving any file in your project.

When you check the console in your browser, if you see your console log, you know that the module has been included in your client-side bundle.

You can leave the `console.log()` in the module while you work on configuration or other things. When the output is gone, you know the module isn't being included (at least for the page you're currently working on).

As a final step, you can use `source-map-explorer` to confirm that the module is no longer present.

This is a nice quick and easy way to make sure something isn't showing up in your client-side bundle if you don't want it to!

There's a faster alternative to using source-map-explorer to examine your client bundle for unwanted modules.

Quickly Determine Whether a Module is Bundled

Instructor: [0:00] You might know that one of the best ways to find out whether a JavaScript module is showing up in your client bundle is by using source-map-explorer.  
  
[0:08] You generate your build with source maps. Then you pass source-map-explorer to that source map, and then will tell you in a fancy chart like this what is in that source map.  
  
[0:22] Here, we see that we've got zod in there, and that's the thing in particular that I'm worried about showing up in my client bundle.  
  
[0:30] However, if you don't want to go through the trouble of that, you can actually really quickly determine whether a particular module is showing up in your client bundle by just changing that module.  
  
[0:40] We're going to go to our node modules. We'll search through those. I'm going to look at zod, and I will go to the package.json, where we will look for a module property. This is what's going to be built, at least in a Remix application.  
  
[0:54] Most bundlers these days will reference the module property for the client-side bundle. It will reference that file when building for the production application. We're just going to go into lib index.mjs, and at the very top we'll console.log zod.mjs.  
  
[1:18] When my editor finally lets me save, [laughs] then we can go back here, hit save in here to trigger a rebuild. Then we can come over here and we see, "Oh, there's zod right there." We know for sure that this file is showing up in our client-side bundle.  
  
[1:35] We can leave that console log in there and do whatever work we need to to move things around so that it doesn't show up in the client-side bundle anymore. When that console log doesn't show up anymore, you know it's gone, at least from this page.  
  
[1:47] When you're done working through that, you can come back to source-map-explorer to be sure that it doesn't show up in this chart. This is a really nice quick and easy and fast way to make sure that something is not showing up in your client-side bundle if you don't want it to.

Adding a Shadow to an SVG Icon with Tailwind CSS

Transcript