zoukankan      html  css  js  c++  java
  • tailwind + vue

    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',
            },
          },
  • 相关阅读:
    8.9_java_35
    8.8_java_34
    8.7_java_33
    8.6_java_32
    8.5_java_31
    8.4_java_30
    8.3_java_29
    2020年春季学期《软件工程》教学总结
    json的标准格式
    详解 【Vue】 生命周期
  • 原文地址:https://www.cnblogs.com/fenle/p/10976466.html
Copyright © 2011-2022 走看看