In this lesson, we are going to be building the footer section of our travel site, and integrating PurgeCSS to reduce our bundle size

The final result will look like:

You can pick up where we last left off, by clicking the bookmark below. Each section of the tutorial is within its own branch. The branch for the previous article is 7-testimonial-section and that is also where we will begin this lesson from.

robertguss/howtocode.io-tailwind-css-landing-page
HowToCode.io - Tailwind CSS Landing Page Tutorial. Contribute to robertguss/howtocode.io-tailwind-css-landing-page development by creating an account on GitHub.

Or you can do it via git with:

git clone git@github.com:robertguss/howtocode.io-tailwind-css-landing-page.git

git checkout 7-testimonial-section

At this point in our tutorial, you should be getting quite familiar with how the classes in Tailwind CSS work and what they mean. So for the rest of the tutorials, I will not be creating tables which list what each class means. If you come across a class you do not recognize, please use the search in their docs to look it up.
Tailwind CSS - A utility-first CSS framework for rapidly building custom designs
Documentation for the Tailwind CSS framework.

For the footer, I am just going to modify a footer I found from Sitepoint.

First, let's create a new footer.html partial in src/partials and include it in our index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Home | FunTravel</title>
  <link rel="stylesheet" href="./css/main.css" />
</head>

<body>
  <include src="./partials/nav.html"></include>
  <include src="./partials/hero.html"></include>
  <include src="./partials/quote-form.html"></include>
  <include src="./partials/popular-destinations.html"></include>
  <include src="./partials/features.html"></include>
  <include src="./partials/callouts.html"></include>
  <include src="./partials/testimonial.html"></include>
  <include src="./partials/footer.html"></include>

  <script src="./js/main.js"></script>
</body>

</html>

Add the following markup to footer.html

<div class="w-full bg-blue-900">
  <div class="flex flex-wrap text-center text-white">

    <!-- ABOUT COLUMN -->

    <div class="w-full md:w-1/3 p-5 border-r border-blue-800 md:text-left">
      <div class="my-6 ml-3 text-xl font-semibold">ABOUT US</div>
      <p class="p-3 text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac est massa. Donec
        eget elementum sapien, tincidunt tempor nunc. Cras sodales id ipsum at convallis.</p>
      <p class="p-3 text-gray-400">Morbi tristique massa nec massa auctor, at scelerisque felis consectetur. Morbi
        tempus et odio sit amet feugiat. Maecenas dignissim a turpis in molestie. Fusce tincidunt vestibulum iaculis.
      </p>
    </div>

    <!-- CONTACTS COLUMN -->

    <div class="w-full md:w-1/3 p-5 border-r border-blue-800">
      <div class="my-6 text-xl font-semibold">CONTACT US</div>
      <p class="mt-8 text-gray-400">
        A108 Adam Street <br>
        New York, NY 535022 <br>
        United States <br>
        <strong>Phone:</strong> +1 5589 55488 55 <br>
        <strong>Email:</strong> info@funtravel.com
      </p>
    </div>

    <!-- FORM COLUMN -->

    <div class="w-full md:w-1/3 p-5">
      <div class="mt-6 text-xl font-semibold">SAY Hi!</div>
      <form class="w-4/5 mx-auto mt-2 px-6 pt-6 pb-4 rounded">
        <div class="flex items-center mb-4">
          <input class="w-full h-10 p-2 border-b border-blue-800 bg-blue-900 text-white" type="text"
            placeholder="Username">
        </div>
        <div class="flex items-center mb-4">
          <input class="w-full h-10 p-2 border-b border-blue-800 bg-blue-900 text-white" type="text"
            placeholder="Email">
        </div>
        <div class="mb-6">
          <textarea class="w-full h-24 px-2 pt-2 border-b-2 border-blue-800 bg-blue-900 text-white"
            placeholder="Message"></textarea>
        </div>
        <div class="flex justify-between items-center">
          <button class="w-full py-2 px-4 rounded bg-blue-500 hover:bg-blue-700 text-white font-bold"
            type="button">SEND</button>
        </div>
      </form>
    </div>
  </div>
</div>

Our footer looks like:

Our complete travel site looks like:


Purge CSS

Now that we have completed our site, we need to get it ready for production. Let's run our build command for parcel and take a look at how big our bundle size is.

npm run build

You should see something similar to the following

Built in 8.45s.

dist/main.4a75d9d1.css                     853.15 KB    3.77s
dist/hero.ba103b23.jpg                      454.1 KB     80ms
dist/main.4a75d9d1.css.map                 324.13 KB     35ms
dist/jonathan.3233769a.jpg                  25.58 KB     79ms
dist/index.html                             13.76 KB    4.59s
dist/travel-tickets-colour.0885fda2.svg      8.21 KB     78ms
dist/carry-on-colour.1cebe4f7.svg            4.63 KB    914ms
dist/main.f84e1103.js                        1.11 KB     45ms
dist/main.f84e1103.js.map                       99 B     34ms

Notice how large our main.css file is! It is over 853kb!!. The reason is that the entire Tailwind CSS library is being included. However, we only want to include the classes we are actually using, which is where Purge CSS comes in.

Introduction | PurgeCSS
PurgeCSS is a tool for removing CSS that you’re not actually using in your project. It can be used as part of your development workflow. PurgeCSS comes with a JavaScript API, a CLI, and plugins for popular build tools.

Tailwind has a section in their documentation that will show us exactly how configure PurgeCSS to address this issue.

Controlling File Size - Tailwind CSS
Strategies for keeping your generated CSS small and performant.

First we need to install PurgeCSS

npm install @fullhuman/postcss-purgecss --save-dev

Then we need to add it to our postcss.config.js file

const purgecss = require('@fullhuman/postcss-purgecss')({
  // Specify the paths to all of the template files in your project
  content: ['./src/**/*.html'],

  // Include any special characters you're using in this regular expression
  defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
});

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    ...(process.env.NODE_ENV === 'production' ? [purgecss] : [])
  ]
};

We are only enabling PurgeCSS in production mode. So PurgeCSS will not run when we are using the dev server, only when we do a production build.

We then need to make a slight modification to our main.css file:

/* purgecss start ignore */
@tailwind base;
@tailwind components;
/* purgecss end ignore */
@tailwind utilities;


.better-to-buy:before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 115%;
  top: 0;
  -webkit-transform: skewY(-12deg);
  transform: skewY(-12deg);
  background: #f6f9fc;
}

.heading-container {
  height: 65vh;
  top: -50px;
}

.hero img {
  height: 65vh;
}

.quote-form {
  margin-top: -45px;
  opacity: 0.99;
  z-index: 10;
}

.quotes {
  top: -50px;
  left: -50px;
  z-index: -1;
}

.testimonial {
  z-index: 2;
}

.travel-tickets {
  right: 0;
  top: -200px;
  transform: rotate(-15deg);
  z-index: -1;
}
This is all of the custom CSS we needed in order to build our travel site!

Let's run our build command again and see the results:

npm run build
Built in 2.83s.

dist/hero.ba103b23.jpg                     454.1 KB     51ms
dist/jonathan.3233769a.jpg                 25.58 KB     48ms
dist/index.html                            13.76 KB    1.50s
dist/main.b9e98fe1.css                      8.45 KB    1.28s
dist/travel-tickets-colour.0885fda2.svg     8.21 KB     47ms
dist/main.b9e98fe1.css.map                  5.07 KB      5ms
dist/carry-on-colour.1cebe4f7.svg           4.63 KB     49ms
dist/main.f84e1103.js                       1.11 KB     47ms
dist/main.f84e1103.js.map                      99 B      2ms

Our main.css file is now only 8.45KB!! πŸ”₯


So that wraps up this tutorial. I hope you enjoyed it and learned how powerful and fun it is to build sites with Tailwind CSS.


You can download a copy of the completed tutorial by clicking the bookmark below. Each section of the tutorial is within its own branch. The branch for this article is 8-footer-purge-css

robertguss/howtocode.io-tailwind-css-landing-page
HowToCode.io - Tailwind CSS Landing Page Tutorial. Contribute to robertguss/howtocode.io-tailwind-css-landing-page development by creating an account on GitHub.

Or you can do it via git with:

git clone git@github.com:robertguss/howtocode.io-tailwind-css-landing-page.git

git checkout 8-footer-purge-css