tailwind + vue

Posted 2021-12-20 fenle

 

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‘,
         ,
       ,