Home

1 minute read

Tracing Objects in TailwindCSS

Tony Lea

Tracing Objects in TailwindCSS

I've been getting good at designing and painting elements on the page using TailwindCSS. I decided to use a flat laptop image 🖼️ and design it with TailwindCSS. It was actually pretty simple after I figured out the best way to trace elements.

Let me share my process.

Finding our design

First, you'll need to find a design that you want to trace. In my case, I am going to try and trace this Macbook Pro image.

laptop.png

Setting this image inside of a flex container, we can easily center it and prepare to draw some shapes onto the screen as we trace out the design.

Designing the basic layout

Typically, you will want to create a base container and add a few blocks to the screen.

layout-1.png

This is just the starting point for tracing our object. Take a look at this codepen example here.

Flexing the layout

Using flexbox, we can easily stretch elements as needed and specify fixed heights for other elements (in my case, the fixed height was the bottom of the laptop).

Checkout our latest product - the ultimate tailwindcss page creator 🚀

layout-flex.png

Notice how we also use the opacity utility classes to keep the image's visibility. Take a look at this example codepen here

Adding and rotating shapes

A few curves may require a little bit more trickery to get the shape you are happy with. In my case, the bottom of the laptop had some angles I created by rotating a few ovals on each side.

layout-bottom.png

Utilizing some absolute positioning and transforms, I created the basic shape for my laptop mockup. Here is an example codepen of our layout so far.

Coloring in our design

The final step is pretty easy. We are going to remove our opacity classes and add the correct color to each element. Take a look at the final result below.

laptop-final.png

As you can tell, it looks very much like the original image (except it's all built with Tailwind classes 🎉).

Take a look at the final codepen layout example here.

Conclusion

Using Tailwind, we can create some pretty awesome designs, shapes, and objects. Be sure to check out many of the other tutorials on DevDojo written about Tailwind.

I hope this tutorial will help you the next time you want to design an object by leveraging only the Tailwind utility classes.