Detailed explanation of Nuxt integrated tailwindcss configuration - practical tutorial foundation - Day03

Continuing from the previous section on Nuxt project configuration and directory structure description - Practical Tutorial Basics - Day02
, I briefly talked about configuration and directory structure. This chapter will talk about project configuration in detail. The default configuration of Nuxt.js covers most of the usage scenarios, which can be accessed through nuxt.config.js to override the default configuration. In the previous two sections, it was mentioned that y.js.cn and jsjiami.cn have used tailwindcss. Next, we will use Nuxt to integrate tailwindcss to imitate these two sites and do some simple examples.

1. Install tailwindcss

npm i @nuxtjs/tailwindcss@4.2.1

2. Then generate the tailwindcss configuration file

npx tailwindcss init

The initial files generated are as follows:

module.exports = {
    
    
  content: [],
  theme: {
    
    
    extend: {
    
    },
  },
  plugins: [],
}

3. Configure Tailwind to remove unused styles in production

In your tailwind.config.js file, configure the purge option with the paths of all pages and components so that Tailwind can tree-shake unused styles in production builds:

module.exports = {
    
    
  purge: [
    './components/**/*.{vue,js}',
    './layouts/**/*.vue',
    './pages/**/*.vue',
    './plugins/**/*.{js,ts}',
    './nuxt.config.{js,ts}',
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    
    
    extend: {
    
    },
  },
  variants: {
    
    
    extend: {
    
    },
  },
  plugins: [],
}

4. Create tailwind.css for global access. (included in each page)

assets/css.tailwind.cssCreate a tailwind.cssfile in @tailwindthat injects Tailwind's base, component, and utility styles using directives:

/*assets/css/tailwind.css*/
@tailwind base;
@tailwind components;
@tailwind utilities;

Then in nuxt.config.jsthe file, configure @nuxtjs/tailwindcss and tailwind.css as follows

/* nuxt.config.js*/
// Global CSS: https://go.nuxtjs.dev/config-css
...
...
css: [
	'@/assets/tailwind.css',
],
...
...
// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
buildModules: [
	'@nuxtjs/tailwindcss'
],
...
...

5. Run the project

• run project

npm run dev

After running the above command, you will see the following effect:

The default port of the Nuxt project is 3000, and the project starts successfully. If the tailwind configuration is successful, you will see the access connection of tailwind in the above figure in the development mode, which includes some commonly used styles of tailwind, and you can copy and reference it with one click. After the visit, as shown in the figure:

6. Check whether the configuration is effective

• components/Tutorial.vueModify the default style background in the project bg-green-100, and the original style of the created project is bg-white:

• Tailwindcss integration is successful, modified to bg-green-100, the effect is shown in the following figure:
  

7. Summary

The above is the description of [email protected]the integration tailwindcss. The above is just a personal configuration description. If you are wrong or you have better opinions, you are welcome to leave a comment in the comment area.