Unicorn Platform

World's best and simplest website builder powered by AI

Build your website
Back to Blog
Monday, October 30, 2023

TailwindCSS VueJS: Ship Beautiful Websites Faster

Introduction

Tailwind CSS and Vue.js have exploded in popularity among web developers in recent years. Tailwind CSS is a utility-first CSS framework that makes it easy to build custom user interfaces without writing custom CSS. Vue.js is a progressive JavaScript framework for building web interfaces and single page applications.

Using Tailwind CSS together with Vue.js is a powerful combination for rapidly building beautiful, responsive websites. The utility-first approach of Tailwind CSS pairs perfectly with Vue's component architecture. Developers can quickly construct UI components using Tailwind's utility classes from within Vue components. There is also a vast ecosystem of Tailwind CSS components and plugins available for Vue.

In this post, we'll explore how to set up a Tailwind CSS + Vue.js project, build essential UI components using Tailwind utilities, customize the styling, and optimize the build. We'll look at project setup with Vue CLI, folder structures, essential UI elements like navigation and forms, managing file size, overriding styles, adding custom variants and directives, and more.

By the end, you'll have a solid understanding of how tailwindcss vuejs can help you ship beautiful, responsive websites faster than ever before. Let's dive in!

Comparing Tailwind CSS to Other Frameworks

Before adopting Tailwind CSS, it's worth comparing it to other popular CSS frameworks like Bootstrap and Bulma to see the pros and cons of each.

Bootstrap - The most fully-featured framework with tons of components. But can have bloated unused code and rigid default styling.

Bulma - Lightweight and flexible but lacks JavaScript components. Relies on custom CSS.

Tailwind CSS - Very customizable, optimized for control. No default look. Requires more custom CSS.

So if you want maximum control without restrictive styling, Tailwind CSS is a great option. But for pre-built components, Bootstrap may suit some projects better.

Real-World Examples

Tailwind CSS powers the UI for many well-known sites like GitHub, Shopify, Coinbase, Discord, Tailwind UI, Laravel Nova, and more! Its flexibility enables consistent designs adapted to each brand.

Setting Up a Tailwind CSS Vue.js Project

There are a few different ways to set up a new Vue.js project with Tailwind CSS:

Using the Vue CLI

The official Vue CLI provides an easy way to scaffold a new project with Tailwind CSS configured:

  • Use vue create to generate a new project with the default preset
  • Select the "Manually select features" option during project creation
  • Enable the "Tailwind CSS" plugin

This will automatically install Tailwind CSS and PostCSS as dependencies. It will generate a postcss.config.js file with the required configuration and directives to process Tailwind CSS.

You can also choose to manually install the Tailwind CSS and PostCSS modules later using npm or Yarn and configure PostCSS yourself. Just be sure to install Tailwind CSS as a development dependency.

Using a Starter Template

There are various starter templates and boilerplates available for spinning up a Vue + Tailwind CSS project quickly:

  • Tailwind App - An official barebones template from the Tailwind CSS team
  • Tailwind UI - Paid starter kits and components from Tailwind Labs
  • VueTailwind - Open source configurable Vue + Tailwind starter

Starter kits can save time over setting up a project manually. However, they may contain unused code and styles that should be removed. Be sure to customize and extend any templates for your specific needs.

Folder Structure Considerations

Some best practices for organizing your project folders:

  • Separate your Vue components, views, styles, and assets into /components, /views, /styles, etc.
  • Use the @ alias in vue.config.js to import folders cleanly like @/components
  • Place Tailwind CSS directives in main.css or PostCSS/SCSS partials

Planning your folder structure will help keep your project maintainable as it grows.

Essential Vue + Tailwind Components

Let's look at how to build some common UI components using Tailwind utilities within Vue:

A simple navbar can be constructed using Tailwind's Flexbox utilities:

<nav class="flex items-center justify-between px-4 py-6">
  <div>  
    <router-link to="/">Home</router-link>
  </div>
  
  <div>
    <router-link to="/about">About</router-link> 
  </div>
</nav>

Dropdown submenus can be added by toggling the hidden class on a nested list:

data() {
  return {
    showMenu: false
  }
}

<nav>

  <div @click="showMenu = !showMenu">
    Products
    <icon v-if="showMenu" name="chevron-up" />
    <icon v-else name="chevron-down" />
  </div>

  <ul
    v-if="showMenu" 
    class="absolute hidden bg-white shadow-md"
  >
    <li><router-link to="/product-1">Product 1</router-link></li>
    <li><router-link to="/product-2">Product 2</router-link></li>
  </ul>

</nav>

This shows how Tailwind utilities can be used to build complex components right within your Vue files.

Cards and Layouts

Tailwind CSS makes it easy to quickly layout card grids or sections using Flexbox or CSS Grid:

<section class="grid grid-cols-1 md:grid-cols-2 gap-6">

  <div class="bg-gray-100 rounded p-4">
    <!-- card content -->
  </div>

  <div class="bg-gray-100 rounded p-4"> 
    <!-- card content -->
  </div>

</section>

Helper classes like text-center and p-4 can style individual cards.

For page layouts, container can center content horizontally:

<div class="container mx-auto px-4">
  <!-- page content --> 
</div>

Buttons and Forms

Tailwind includes great utility classes for styling buttons:

<button
  class="bg-blue-500 text-white px-4 py-3 rounded hover:bg-blue-600" 
>
  Submit
</button>

For forms, Tailwind has flexbox utilities for layout along with styled form controls:

<form class="bg-white p-6 rounded shadow">

  <div class="mb-4">
    <label class="block font-bold mb-2">Name</label>
    
    <input class="border p-2 w-full" type="text" />
  </div>

  <button class="bg-blue-500 text-white p-2 rounded">
    Submit
  </button>

</form>

This covers some essential components you'll need for most sites. Many more examples are in the Tailwind docs and component libraries.

Responsive Design Tips

Tailwind CSS makes responsive design simple. Here are some handy utility classes:

  • hidden md:block hides content on mobile
  • sm:text-lg sets larger text on small screens
  • lg:w-1/2 adjusts width on large screens
  • md:grid-cols-2 adds columns on medium screens

You can also use @responsive directives to add custom breakpoints.

For images, object-cover and object-center helps them resize nicely.

Using these utilities, you can build fully responsive interfaces without writing media queries!

Integrating UI Component Libraries

Many Vue component libraries like Vuetify, Buefy and Vuestic provide Tailwind CSS support:

<b-button
  class="bg-blue-500 text-white"
>
  Submit
</b-button>

This allows you to style their components while retaining the functionality.

You can also wrap components and pass class as a prop:

<div :class="$attrs.class">
  <b-button>Submit</b-button>
</div>

So integrating Tailwind CSS with Vue UI libraries is easy!

Customization and Optimization

While Tailwind CSS is designed to be highly customizable, here are some tips for managing your project's CSS file size and styling:

PurgeCSS Configuration

  • Extract template comments for dynamic class names
  • Safelist any global styles needed on all pages
    -TuneExtractor to find all class usages

Managing CSS File Size

  • Enable PurgeCSS in production to remove unused CSS
  • Configure your build to generate classes dynamically instead of outputting the entire library
  • Code split and lazy load components where possible

Customization Techniques

  • Override base styles in SCSS partials imported after Tailwind
  • Register custom variants like .btn-primary for additional flexibility
  • Use plugins like Typography.js or Forms.css for design system
  • Directives add utilities dynamically in templates like v-bind="class"

Optimization and Performance

  • Tree shaking unused styles with PurgeCSS or UnCSS
  • Minify CSS for production with cssnano
  • Optimize images with plugins like vue-image-optimizer
  • Cache assets like fonts, scripts, images with a service worker

Proper PurgeCSS configuration and code splitting are key to controlling file size.

Conclusion

In summary, Tailwind CSS is a fantastic tool for rapidly building modern UIs within Vue.js applications. Features like utility classes, customizable variants, and PurgeCSS make tailwindcss vuejs development very fast.

We covered project setup, essential UI components, responsive design, integrating libraries like Vuetify, and customization techniques. Real-world examples show that Tailwind CSS powers sites like GitHub and Shopify.

The Tailwind CSS ecosystem offers many pre-built components and plugins that integrate beautifully with Vue.js. Additional resources like Tailwind UI provide production-ready components to build UIs faster.

I highly recommend giving Tailwind CSS in Vue.js a try for your next web project. The speed and flexibility will help you ship polished responsive websites and apps with ease. Check out Float UI's templates for a head start on your Tailwind CSS + Vue project!