Implementing Tailwind into your Codepen project
- In the CSS window, click on the gear icon.
- In the "Add External Stylesheets" section, search for "tailwind" and select "tailwindcss" from the dropdown menu.
- Hit "Save & Close"
Building the grid
- In the html section, start with a
<section>tag and build out some base styles
<section class="w-full max-w-6xl mx-auto px-4 m-4 border-2 border-red-600">
taking a mobile-first approach, establish this <section> as a full-width element with the tailwind class w-full, and a max-width of 72rem, or max-w-6xl.
Next, let's add some margin and padding to get this area some breathing room.
mx-auto sets the margin left & right to auto, which helps center this section on the page; while m-4 sets the margin on all sides to 4rem, or 16px. px-4 sets the padding left & right to 4rem, or 16px.
The border-2 class adds a border around the element with a width of 2px. The border-red-600 class adds a red color to the existing border. These two border classes are for demonstration purposes, so you can easily see where the <section> tag ends, and the following tags begin.
- Inside the section tag, we will need a
<div>to establish our grid property.
<div class="grid md:grid-cols-12 gap-5 p-4 m-2">
grid is shorthand for display:grid. This will establish our div as a grid element so we have a main section that will take up the majority of the space, and a sidebar element next to it. md:grid-cols-12 says that on medium size screens (screens with a minimum width of 768px) the div will span 12 grid columns. gap-5 acts as our grid-gap and will add a grid-gap of 1.25rem, or 16px. p-4 and m-2 set the padding and margin to 1rem and 0.5rem, respectively.
Adding properties inside the Grid element
- Now that our grid layout has been established, we need our
<main>and<aside>tags.
<main class="md:col-span-9 p-4 border-2 border-green-600">
Similar to earlier when we established the div element as a 12 column grid, adding md:col-span-9 will tell this <main> element to span the width of 9 of our available 12 columns on medium size screens. p-4 adds 1rem of padding in the element. And like before, the border elements are just for fun.
Inside of the <main> tag I also added a headline, subhead, and paragraph of text. Go ahead and add those now.
<h1 class="text-3xl">Headline</h1>
<h3 class="text-xl">Subheadline</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum voluptas saepe sit qui, veniam, distinctio quos suscipit provident dolorum tempore officia eaque, delectus reiciendis. Ad odio quam ullam nostrum nisi.</p>
text-3xl and text-xl set the font-size of these header tags as 1.875rem and 1.25rem respectively.
- After the closing
</main>tag, add an<aside>html element.
<aside class="md:col-span-3 md:pt-0 p-2 border-2 border-blue-600">
On medium screens, this section will span 3 of our available 12 columns using md:col-span-3, have a padding-top of 0px on medium screens, padding of 0.5rem on all sides, and as before, the borders are for fun!
Add a <p> tag with some placeholder text inside of the <aside> element and these two elements should live side-by-side on medium size screens and larger, and should stack, with the <main> area above the <aside> area on smaller screens.
Viewing our finished product
Let's take a look here, at this codepen example.
Notice how the css column of our Codepen project is empty? -- we wrote all of our css using Tailwind classes inside of our html elements!
I like to think of Tailwind as writing a short-hand css. Tailwind assumes knowledge of css, so I suggest learning css first and slowly incorporating Tailwind into your projects.
Resources I find helpful
Two Tailwind resources I love to use are the TailwindCSS docs and this TailwindCSS Cheat Sheet
If you are interested in becoming more familiar with CSS Grid, I suggest Wes Bos' FREE css grid course.
Thank you!
Thank you so much for reading. Let me know if you have any questions, suggestions or comments.
You can find me on Twitter @hannahrosecodes
Top comments (0)