Converting existing CSS into Tailwind classes
In part one, we started by styling the sidebar and menu for the lifestyle blog.
I started with custom SCSS classes, which resulted in the following result:
Yesterday we added Tailwind to our Eleventy project, so let’s see how we can now change the frontend, so it styled once again.
Our initial project looks like this at the moment:
Ohno! This looks horrible, all our hard work is gone, but no worries, we will solve this!
Changing our SCSS to Tailwind
As you might know, Tailwind CSS is a utility-first CSS framework. It uses utility classes to achieve styling.
Luckily for us, we know exactly what we are looking for, we can then use the Tailwind Docs to search what the corresponding class is.
Let me document how I go about changing these.
Let’s take the <main> element, for instance. This had the following CSS.
Let’s first find the position: relative type that into the tailwind search bar.
We can then click on the first result and see that we need to use the relative class.
Let’s add that to the markup:
One down, two to go.
The second one is the min-height. We can use the same process and will find we need the min-h-screen class.
Nice, we are getting somewhere. The last one is a bit of a difficult one since we used a fixed position of 58px for each element. Tailwind doesn't really work with fixed positions, although we could add them to our tailwind config. However, we will take the closest tailwind size, which is 14 (3.5rem), which converts to: 56px.
Getting back to our padding-left, we saw that we needed double that, so we use pl-28, which converts to padding-left: 7rem.
Our <main> element ends up with these classes:
Styling the aside element
Our <aside> element had the following CSS.
We will get back to the color in a second, but we can all achieve the other classes with tailwind classes.
The result looks like this:
This will result in the following:
Still a bit of a mess, so let’s first move on to styling those social icons before adding the colors.
For the <ul>, we don't need any classes.
The <li> items had the following CSS.
That converts into the following classes:
Then the <a> elements inside looked like this:
We can turn that into the following Tailwind classes.
The last element we need is the SVG
For the SVG, we can use these Tailwind classes.
Now, we won’t see much since we need our purple background-color.
Adding custom colors to Tailwind
Unfortionally Tailwind doesn’t come with this exact color, but it does come with the option to add our own colors!
To do this, we have to add our custom color in the tailwind.config.js file.
We can extend our custom color in the theme section under colors like so:
In our case, the purple only has one option.
Then we can go back to our aside element and add the bg-purple class to it.
This will now result in the following:
Wow, that already is starting to look like what we had.
Adding the expanding menu with Tailwind
Now let’s see how we can style the menu to expand.
I’m going to be quickly going over the basic classes and spend more time explaining the checked state.
<nav> element CSS styling:
Converted to Tailwind classes:
Note: we also added our light-blue color which looks like this:
The menu than holds the following styling:
Which can be turned into the following Tailwind:
The checkbox can just get the hidden class:
As for the label, it looked like this in CSS
Which we can convert to this Tailwind:
I don’t think the ~ selector is available in Tailwind, so we would have to write a little bit of custom CSS just for this selector.
This will apply the left-0 class to our menu once the checkbox is checked.
Let’s see if it works:
Nice! All we have to do is the actual menu styling.
The CSS before for the logo
Which can be converted to:
Then the list had the following CSS:
That we can convert into Tailwind as such:
Now we should have the end result we had before, but all in Tailwind classes!
You can find these amended changed on GitHub.
Thank you for reading, and let’s connect!
Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter
Originally published at https://daily-dev-tips.com on January 22, 2021.
