tailwind + vue

标签：--   import   auto   ack   根目录   util   ref   top   bsp   

1. 在根目录下生成 tailwind 配置文件

   npx tailwind init --full

    

2. 修改 package.json 的 postcss 选项

     "postcss": {
       "plugins": {
         "tailwindcss": "./tailwind.config.js",
         "autoprefixer": {}
       }
     },

    

3. 导入样式到 App.vue 下

   <style>
   @import "../node_modules/tailwindcss/base.css";
   @import "../node_modules/tailwindcss/components.css";
   @import "../node_modules/tailwindcss/utilities.css";
   </style>

    

4. 刷新页面测试是否生效了
5. 在 tailwind.config.js 修改颜色等，做定制

   theme: {
       screens: {
         sm: ‘640px‘,
         md: ‘768px‘,
         lg: ‘1024px‘,
         xl: ‘1280px‘,
       },
       colors: {
         transparent: ‘transparent‘,
   
         black: ‘#000‘,
         white: ‘#fff‘,
         gray: {
           // 100: ‘#f7fafc‘,
           200: ‘#e8e8ea‘,
           300: ‘#e5e5e5‘,
           // 900: ‘#1a202c‘,
         },
         red: {
           default: ‘#db0300‘,
           dark: ‘#c40400‘,
         },
       },

    

tailwind + vue

标签：--   import   auto   ack   根目录   util   ref   top   bsp   

原文地址：https://www.cnblogs.com/fenle/p/10976466.html