How to Use Tailwind CSS in Nuxt 3
Tailwind CSS is a popular utility-first CSS framework that allows developers to rapidly build user interfaces with pre-defined classes.
It provides a wide range of ready-to-use utility classes that can be easily composed to style HTML elements. Nuxt.js is a powerful framework for building Vue.js applications, and with the release of Nuxt 3, integrating Tailwind CSS has become even more straightforward.
In this article, we'll explore how to use Tailwind CSS in Nuxt 3 and take advantage of its capabilities to create stunning user interfaces.
Prerequisites
Before we begin, make sure you have the following prerequisites installed on your development machine:
- Node.js (version 14 or later)
- Nuxt.js (version 3 or later)
- Tailwind CSS (version 2 or later)
Setting Up a New Nuxt 3 Project
To start, let's create a new Nuxt 3 project. Open your terminal and run the following commands:
# Create a new Nuxt 3 project
npx nuxi init <project-name>
This command will prompt you to choose a project preset. You can either select the default preset or manually select the features you need.
Make sure not to include "Tailwind CSS" in the list of features to be installed, because we will do it mannualy here.. thats the point of this article.
Once the project setup is complete, navigate to the project directory and install the dependencies:
cd <project-name>
npm install
Install Tailwind CSS
Nuxt 3 comes with built-in support for Tailwind CSS if you choose so. However, we'll add & configure it according to our needs.
Lets install it from npm:
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
It will generate the tailwind.config.js file in the root directory of your project. This file contains the Tailwind CSS configuration.lets Configure the template paths:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./components/**/*.{js,vue,ts}",
"./layouts/**/*.vue",
"./pages/**/*.vue",
"./plugins/**/*.{js,ts}",
"./nuxt.config.{js,ts}",
"./app.vue",
],
theme: {
extend: {},
},
plugins: [],
}
Lets now add tailwindcss and autoprefixer to the postcss.plugins object in your nuxt.config.js file.
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
postcss: {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
},
})
Importing Tailwind CSS
Now Create an ./assets/css/main.css file and add the @tailwind directives for each of Tailwind’s layers that you want to use.
@tailwind base;
@tailwind components;
@tailwind utilities;
This import statement includes the base styles, component styles, and utility classes provided by Tailwind CSS.
Use the CSS file globally
Lets include the newly-created ./assets/css/main.css to the css array in your nuxt.config.js file.
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
css: ['~/assets/css/main.css'],
postcss: {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
},
})
Applying Tailwind CSS Classes
To apply Tailwind CSS classes to your Vue components, open any .vue file in the pages or components directory of your project. Here's an example:
<template>
<div class="bg-white p-4 rounded shadow">
<h1 class="text-2xl font-bold mb-2">Hello, Tailwind CSS!</h1>
<p class="text-gray-500">This is a Nuxt 3 project with Tailwind CSS.</p>
<button class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded mt-4">
Click Me
</button>
</div>
</template>
In the example above, we've used various Tailwind CSS classes to style the div, h1, p, and button elements. These classes define colors, padding, margins, font sizes, and more.
Building and Running the Project
To build and run your Nuxt 3 project with Tailwind CSS, use the following commands in your terminal:
# Build the project
npm run build
# Start the development server
npm run dev
After running the npm run dev command, open your browser and navigate to http://localhost:3000 to see your application. The styles defined using Tailwind CSS classes should be applied to the elements.
Conclusion
Integrating Tailwind CSS into a Nuxt 3 project is a straightforward process. By following the steps outlined in this article, you can start leveraging the power of Tailwind CSS to create beautiful user interfaces with minimal effort.
Remember to consult the official Tailwind CSS documentation for a comprehensive list of utility classes and customization options. Happy coding!
