CSS frameworks like Bootstrap, Bulma, and Materialize are hugely popular among front-end developers. They are a great way to quickly style an application on the set of standard guidelines. However, they are a little difficult to customize and bloated for small applications.

Tailwind CSS is a utility-first CSS framework. This means that instead of providing you with ready-made components, Tailwind provides utility-based CSS classes that you can use to style your components. This gives you more flexibility over your design and you can build your own UI framework on top of Tailwind CSS by extending the Tailwind classes.

In this tutorial, you’ll build a portfolio landing page that will have the author’s information and a form to subscribe to a newsletter. You’ll build the front end with Nuxt.js and style it using Tailwind CSS.

When you’re finished, you’ll have a portfolio website that will look like the following:

Prerequisites

To follow along with this tutorial, you will need the following things:

The tutorial assumes that the reader has basic working knowledge of Nuxt.js and uses Nuxt.js v2.15.7, Tailwind v2.2.19, Node v14.18.2, and NPM v6.14.15.

Setting up Nuxt.js

In case you don’t have an existing Nuxt.js project, you can set up one in this section. Otherwise, feel free to skip to the next section.

First, open up your terminal, navigate to a path of your choice and run the following command in your terminal:

npx create-nuxt-app nuxt-tailwind-portfolio

During the installation, you’ll be asked some questions related to project name, Nuxt options, UI framework, TypeScript, linter, testing framework, and more. Choose the values according to your need (but skip adding Tailwind CSS here, we’ll do so in the next step in greater detail). Once the installation is complete, your Nuxt.js project will be created in the nuxt-tailwind-portfolio directory.

Next, cd into the directory and launch the Nuxt.js project by running the following commands in your terminal:

cd nuxt-tailwind-portfolio
npm run dev

This completes the basic setup for the Nuxt.js project and next you need to set up Tailwind.

Setting up Tailwind in Nuxt.js

In this step, you’ll set up Tailwind CSS in your Nuxt.js project.

First, navigate to your project path and run the following commands in your terminal. This will install the packages related to Tailwind CSS and its peer dependencies.

npm install @nuxtjs/tailwindcss tailwindcss@latest postcss@latest autoprefixer@latest

Next, create a Tailwind configuration file at the root of your project by running the following command in your terminal:

npx tailwindcss init

This will create a tailwind.config.js file with a minimal configuration as follows:

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

Finally, add the @nuxtjs/tailwindcss module to the buildModules array in the nuxt.config.js file:

export default {
  ...
  buildModules: [
    ...
    '@nuxtjs/tailwindcss',
  ],
}

This configures the Nuxt.js to load @nuxtjs/tailwindcss at the build time.

At this point, restart your Nuxt.js development server by running the following command and making sure that the dev server build completes without any build errors:

npm run dev

That’s it! You are now ready to use Tailwind CSS classes in your Nuxt.js application. In the next section, you’ll create Nuxt.js components and style them using Tailwind CSS.

Creating custom components using Tailwind classes

In this step, you’ll learn to create custom components in Nuxt.js, style them using Tailwind CSS classes and import them into a Nuxt.js page.

In this Developer Portfolio app, you need to add three components:

  1. Author information
  2. Newsletter subs
  3. Footer

Designing the author component

First, create an Author.vue file in the components directory and add the following template code to it:

<template>
  <div class="flex items-center w-3/4 min-h-screen mx-auto">
    <div class="flex-1">
      <h1 class="mb-3 text-3xl">Sammy</h1>
      <p class="mb-3 text-gray-700 pr-4">
        Hi 👋, I am a Full Stack Developer and Technical Content Writer. I work
        with React, Vue, Flutter, Strapi and more.
      </p>
    </div>
    <div class="flex-1">
      <img
        class="w-full shadow-lg rounded"
        src="https://unsplash.com/photos/GkFQEOubrCo/download?ixid=MnwxMjA3fDB8MXxzZWFyY2h8MTl8fGNvZGluZ3x8MHx8fHwxNjM4MTc1MzMw&force=true&w=640"
      />
    </div>
  </div>
</template>

Next, open the pages/index.vue file and replace the existing code with the following template code:

<template>
  <section>
    <Author />
  </section>
</template>

Finally, save your progress and visit https://localhost:3000 on your favorite web browser. You’ll see your Author component rendered as follows:

Designing the “subscribe to” newsletter component

First, just like in the previous case, create a SubscribeBox.vue file in the components directory and add the following template code to it:

<template>
  <div class="w-1/2 mx-auto bg-gray-800 px-6 py-8 rounded shadow-md">
    <h2 class="mb-1 text-2xl text-white">Subscribe to Newsletter</h2>
    <p class="mb-3 text-gray-500">
      I will send tips and tricks related to Jamstack technologies every Tuesday
      morning.
    </p>
    <input
      type="email"
      class="block bg-gray-900 w-full py-2 px-4 rounded mb-4"
      name="email"
      placeholder="Your Email"
    />
    <button
      type="submit"
      class="inline-block bg-blue-100 rounded-full px-4 py-1 font-semibold text-blue-900"
    >
      Subscribe
    </button>
  </div>
</template>

Next, update the pages/index.vue file and add a reference to the SubscribeBox component:

<template>
  <section>
    <Author />
    <SubscribeBox />
  </section>
</template>

Finally, save your progress and visit https://localhost:3000. You’ll see the SubscribeBox component rendered as follows:

First, create a Footer.vue file in the components directory and add the following template code to it:

<template>
  <footer class="container mx-auto py-8">
    <p class="text-gray-500 text-sm text-center">
      This portfolio website is built using Nuxt and Tailwind.
    </p>
  </footer>
</template>

Next, update the pages/index.vue file and add a reference to the Footer component:

<template>
  <section>
    <Author />
    <SubscribeBox />
    <Footer />
  </section>
</template>

Finally, save your progress and visit https://localhost:3000. You’ll see all the three components rendered as follows:

At this point, the project uses very long CSS classes. In the next section, you’ll learn to trim the CSS classes into short single class names.

Trimming long classes

In this step, you’ll learn to trim long classes to a single class name.

If you look at the classes used for styling the h1 and p tags, you’ll see we use the same classes repeatedly. We use mb- to add bottom margin, and text- to specify text size. Instead of adding classes over and over again, you can abstract them into a single class and reference your custom classes anywhere in your Nuxt.js application. This is how you can leverage the power of Tailwind CSS to rapidly build beautiful websites.
To do so, in the pages/index.vue file, add the following styles after your