Adding Tailwind to Your Nuxt 3 Project

March 14, 2023

Installing Tailwind dependencies

To install Tailwind in your new Nuxt 3 project, you will need to install the necessary dependencies. Simply navigate to your project directory and run the following command:

npm install --save-dev @nuxtjs/tailwindcss @tailwindcss/typography

Running this command will install the most up-to-date versions of Tailwind, along with PostCSS and Autoprefixer.

Creating a Tailwind Configuration

If you want to customize your Tailwind CSS styling, you can create a configuration file by running the following command:

npx tailwindcss init

Executing this command will generate a new tailwind.config.js file in your project's root directory. The configuration file allows you to modify your Tailwind styling, such as adjusting color schemes, typography, spacing, and responsive behavior. With a custom Tailwind configuration, you can tailor your styling to meet your specific design requirements.

Tailwind Configuration: Customizing it

To configure Tailwind, you need to let it know which files to purge and specify any customizations. Open your tailwind.config.js file and add the following code to signify which files to purge:

module.exports = {
  mode: 'jit',
  content: [
    './assets/**/*.css',
    './components/*.{vue,js}',
    './components/**/*.{vue,js}',
    './pages/*.vue',
    './pages/**/*.vue',
    './plugins/**/*.{js,ts}',
    './*.{vue,js,ts}',
    './nuxt.config.{js,ts}',
  ],
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/typography')
  ],
};

This code will instruct Tailwind to search for unused CSS classes in these specified paths and remove them from your production build. You can also customize your Tailwind configuration file by adding or modifying color schemes, font sizes, breakpoints, and more to align with your design preferences. With a tailored configuration, you can eliminate unused CSS and optimize your website's performance.

Integrating Tailwind Styles into Your Project

Once you've installed Tailwind and created your configuration file, it's time to integrate it into your project styles. To begin, create a new file at assets/css/main.css and add the following code:

@tailwind base;
@tailwind components;
@tailwind utilities;

This code imports the base, components, and utilities styles from Tailwind, providing a solid foundation for your project styling. You can also add custom styles to this file to extend or override any Tailwind styles.

Updating Nuxt Config for Tailwind Styling

To use Tailwind with your Nuxt 3 project, you need to update the nuxt.config.ts file. First, import the defineNuxtConfig function from nuxt3. Then add the following code:

export default defineNuxtConfig({
  modules: ['@nuxt/content', '@nuxtjs/tailwindcss'],
  tailwindcss: {
      cssPath: '~/assets/css/main.css',
    },
  content: {
    // https://content.nuxtjs.org/api/configuration
  },
  postcss: {
        plugins: {
            tailwindcss: {},
            autoprefixer: {}
        }
    }
})

This code imports your Tailwind styles by directing Nuxt to your styles file at assets/css/main.css. It also sets the PostCSS options for your build process by referencing your postcss.config.js file, which should contain the tailwindcss plugin.

With the Nuxt config file updated, you are now ready to use Tailwind for your project's styling, simplifying your design process while improving code efficiency.