Nuxt集成tailwindcss配置详解-实战教程基础-Day03

接上一节Nuxt项目配置、目录结构说明-实战教程基础-Day02
稍稍讲了一下配置跟目录结构，本章节将仔细讲讲项目配置，Nuxt.js 默认的配置涵盖了大部分使用情形，可通过 nuxt.config.js 来覆盖默认的配置。在前面两节中有提到 y.js.cn跟 jsjiami.cn有用到过tailwindcss，接下来我们将用Nuxt集成tailwindcss来模仿这两个站做一些简单的例子

一、安装tailwindcss

npm i @nuxtjs/tailwindcss@4.2.1

二、然后生成tailwindcss配置文件

npx tailwindcss init

生成的初始文件如下：

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

三、配置 Tailwind 以删除生产中未使用的样式

在您的 tailwind.config.js 文件中,使用所有页面和组件的路径配置 purge 选项,以便 Tailwind 可以在生产构建中对未使用的样式进行树摇动:

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

四、创建tailwind.css，使其全局访问。(包含在每个页面中)

在assets/css.tailwind.css中创建一个tailwind.css文件,使用@tailwind指令注入 Tailwind 的基础、组件和实用程序样式:

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

然后在nuxt.config.js文件中，将@nuxtjs/tailwindcss，tailwind.css进行如下配置

/* 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'
],
...
...

五、运行项目

• 运行项目

npm run dev

运行上述命令后将会看到如下效果：

Nuxt项目默认端口为3000，项目启动成功，如tailwind配置成功在开发模式中将会看到上图tailwind的访问连接，里面包括一些tailwind常用的样式，一键复制引用即可。访问后如图：

六、校验配置是否生效

• 在项目的components/Tutorial.vue中修改默认的样式背景为bg-green-100，原本创建项目的样式为bg-white:

• tailwindcss集成成功，修改为bg-green-100，效果如下图所示：
  

七、总结

上述就是Nuxt@2.x集成tailwindcss的讲述了，上说只是代表个人配置说明，如果错误的地方或者大家有更好的意见，欢迎大家在评论区留言评论。