I built a portfolio website using the Nuxt Vue framework because I wanted to use it for static site generation to achieve a faster load time for the website.
Rather than adding Tailwind CSS the usual way I’m going to use a Nuxt module as it’s easier to add Tailwind CSS to Nuxt.
Nuxt Modules
The Nuxt framework was built to provide modules that are like plugins but simpler to configure, there is a modules page available where you can search for modules and view module pages that have more information on the modules and how to add them to the framework.
Nuxt.js Tailwind module
More information about the plugin is available on the main website, which can be found at https://tailwindcss.nuxtjs.org.
How to setup
Change the current directory to the folder containing your Nuxt framework and then use the npx command that comes with Node package manager to add the TailwindCSS module.
npx nuxi@latest module add tailwindcss
Go to your project, open the nuxt.config.ts file, and add the module package name to the modules configuration value.
export default defineNuxtConfig({
modules: ['@nuxtjs/tailwindcss']
})
At this point, you can start using Tailwind CSS by adding the utility classes to your HTML elements and you will see the CSS applied when viewing the website.
Adding Tailwind CSS file
If you need to add some custom CSS or do something other than use the standard utility classes that come with Tailwind CSS then a tailwind.css file will be needed.
Go to the directory assets/css directory and create a tailwind.css file.
Open the file and add the following to inject the tailwind classes and then you can add your own custom CSS below these lines while developing your project.
@tailwind base;
@tailwind components;
@tailwind utilities;
If you get an error you may need to stop and start your development environment using the Ctrl and C keys to stop and then the below command to start up again.
npm run dev