How to install Tailwind CSS with Nuxt.js and Flowbite

.

1. Require and install the NuxtTailwind module by installing it via NPM:
   

npm install --save-dev @nuxtjs/tailwindcss

1. Configure the Nuxt.js configuration file to include the Tailwind module:
   

// nuxt.config.{js,ts}

export default defineNuxtConfig({

    modules: [

        '@nuxtjs/tailwindcss'

    ]

})

1. Create a tailwind.config.js file by running the following command:
   

npx tailwindcss init

1. Create a new CSS file ./assets/css/input.css and import the main Tailwind CSS directives:
   

@tailwind base;

@tailwind components;

@tailwind utilities;

1. Set up the template paths for your Nuxt.js project inside the Tailwind CSS configuration file:
   

module.exports = {

  content: [

    "./components/**/*.{js,vue,ts}",

    "./layouts/**/*.vue",

    "./pages/**/*.vue",

    "./plugins/**/*.{js,ts}",

    "./nuxt.config.{js,ts}",

  ],

  theme: {

    extend: {},

  },

  plugins: [],

}

Tailwind CSS is now configured in your project and if you add the utility classes anywhere in your Vue template files the CSS will be generated and included.

Install Flowbite

After installing both Nuxt.js and Tailwind CSS inside your project we can proceed by installing such as modals, navbars, tables, dropdowns, and more.

Let's use the Events.vue file to see it in action.

JavaScript API

To make the component interactive we need to import the Modal object from Flowbite and setup the object parameters, options, and methods to show or hide the modal based on the button click.

<script setup>

import { onMounted } from 'vue'

import { Modal } from 'flowbite'



onMounted(() => {

    // setup available elements

    const $buttonElement = document.querySelector('#button');

    const $modalElement = document.querySelector('#modal');

    const $closeButton = document.querySelector('#closeButton');



    // set modal options

    const modalOptions = {

        backdropClasses: 'bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40'

    }



    // create a new modal instance

    if ($modalElement) {

        const modal = new Modal($modalElement, modalOptions);



        // set event listeners for the button to show the modal

        $buttonElement.addEventListener('click', () => modal.toggle());

        $closeButton.addEventListener('click', () => modal.hide());



    }

})

</script>

As you can see we use the onMounted() lifecycle method from Vue 3 to query for the elements that we need to create a modal component and then programatically use the methods such as showing or hiding the modal.

// add your own logic and then show the modal

modal.show();



// or you can hide it

modal.hide();

Every interactive component page that requires JavaScript has a documentation on Flowbite showing you the available parameters, options, and methods that you can use.

Using types

Flowbite also supports TypeScript as of v1.6.0 and it allows use to use type declarations and interfaces for the objects, parameters, and option values for the JavaScript API.

You can import these types or interfaces like this:

import { Modal } from 'flowbite'

import type { ModalOptions, ModalInterface } from 'flowbite'



// other code

Generally speaking, all of the components have an interface definition that you can use whenever you create a new object to make sure that you’re using the correct types for parameters and methods.

When creating a new modal you can set the ModalInterface as the main type:

const modal: ModalInterface = new Modal($modalElement, modalOptions);

All of the Flowbite components also support type declaration for the options object. Here's an example:

const modalOptions: ModalOptions = {

    placement: 'top-right'

}



const modal: ModalInterface = new Modal($modalElement, modalOptions);

Using types can be very benefitial because it makes sure that you only use the allowed types and values for the options that are available. For example, if you used a value such as yellow for the placement object, which is a color, TypeScript will throw an error because it does not meet the type requirements from Flowbite.

Here's the full code using types with TypeScript:

import { Modal } from 'flowbite'

import type { ModalOptions, ModalInterface } from 'flowbite'



const $buttonElement: HTMLElement = document.querySelector('#button');

const $modalElement: HTMLElement = document.querySelector('#modal');



const modalOptions: ModalOptions = {

    placement: 'top-right'

}



const modal: ModalInterface = new Modal($modalElement, modalOptions);

$buttonElement.addEventListener('click', () => modal.toggle());



modal.show();

Learn more about using showcasing all of the interactive UI components from Flowbite to help you get started building web applications.

Flowbite Vue Library

We also started working on a .