How to start a project with NuxtJS 3 and Tailwindcss ?

#vue #nuxt #tailwindcss #javascript

Nuxt.js is a framework for building universal Vue.js applications. It is based on Vue.js, a popular JavaScript library for building web user interfaces, and adds a number of additional features to make it easier to build universal applications.

To start a project with Nuxt.js and Tailwind CSS, you will first need to install the required dependencies.

To install Nuxt.js, you can use the following command :

npx nuxi init <project-name>

To install Tailwind CSS, you can use the following command :

yarn add tailwindcss postcss autoprefixer
npx tailwindcss init

Next, you will need to configure Nuxt.js to use Tailwind CSS. To do this, you will need to add the following to your nuxt.config.js file :

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

This will configure Nuxt.js to include the tailwind.css file in your project's build.

Create ./assets/css/main.css :

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

Finally, you will need to create a tailwind.config.js file in the root of your project and configure it to use the styles that you want.

For example, you might add the following to your tailwind.config.js file to use the default styles provided by Tailwind CSS:

/** @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: [],
}

With these steps, you should now have a working Nuxt.js project with Tailwind CSS configured. You can now start building your project!