Nuxt3下引入tailwindcss及其它色系和字号模板

Nuxt3下引入tailwindcss，从最初的手写style文件到使用bootstrat5的CSS框架，最终我选择tailwindcss。TailwindCSS官方称一个可以让你脱离css文件，在html直接通过class修改样式的框架，在通过一两个项目的引入使用后最终决定以后都使用它了，这里主要讲一下在nuxt3下面如何引入并使用，并提供一个推荐的css模板，这个模板是根据之前使用bootstrap习惯的一种方式，并把这种方式和tailwindcss结合起来，用起来更加方便。 1.Nuxt3下引入tailwindcss,在nuxt.config.ts文件中，当然前题是npm i @nuxtjs/tailwindcss --save ``` export default defineNuxtConfig({     modules:['@nuxtjs/tailwindcss'], }); ``` 2.在项目下建立 tailwind.config.js，已建立基本色系和文号，并设置了a和button两个标签一般情况 和鼠标悬停效果，均使用的透明方式，不影响色系。 ``` import plugin from 'tailwindcss/plugin'; module.exports = {   content: [     "./components//*.{js,vue,ts}",     "./layouts//.vue",     "./pages/**/.vue",     "./plugins/**/*.{js,ts}",     "./nuxt.config.{js,ts}",     "./app.vue",     "./error.vue",   ],   theme: {     screens:{       'sm':'576px','md':'768px','lg':'1024px','xl':'1280px','2xl':'1536px'     },     extend: {       colors:{//主题颜色         'primary'   :   '#336699',         'secondary' :   '#3399cc',         'light'     :   '#ccffff',         'info'      :   '#ccffcc',         'warning'   :   '#ffcc33',         'success'   :   '#006633',         'danger'    :   '#cc3333',         'dark'      :   '#003366',         'muted'     :   '#d0d0da',         'white'     :   '#fffffc',         'black'     :   '#1d1d18',         'link'      :   '#034569',         'body'      :   'rgba(0, 0, 0, 0.85)',         'bodybg'    :   '#fefefd',       },       fontSize:{//字号大小         'xs'        :   '0.625rem',         'sm'        :   '0.75rem',         'base'      :   '0.875rem',//默认字体         'md'        :   '1rem',         'lg'        :   '1.125rem',         'xl'        :   '1.25rem',         '2xl'       :   '1.563rem',         '3xl'       :   '1.953rem',         '4xl'       :   '2.441rem',         '5xl'       :   '3.052rem',       }     },   },   plugins: [     plugin(function({ addBase, theme }) {//添加默认配置       addBase({         'body': {fontSize: theme('fontSize.base'),color:theme('colors.body'),background:theme('colors.bodybg')},         'a':{color:theme('colors.link'),transition:'all 0.5s ease'},         'a:hover,button:hover':{opacity:'0.88',transition:'all 0.5s ease'},         'a:active,button:active':{opacity:'1',transition:'all 0.5s ease'},         'button':{transition:'all 0.5s ease'},       })     })   ], } ```