使用 tailwindcss 构建 dist vue 不起作用

Posted 2023-03-07

【中文标题】使用 tailwindcss 构建 dist vue 不起作用

【英文标题】：Build dist vue with tailwindcss not working

【发布时间】：2021-12-22 16:34:43

【问题描述】：

构建完成后，顺风中的 css 不显示

在我的 package.json 中。我不知道顺风的构建是什么样的，我只是使用默认的。

       
          "name": "portiflo",
          "version": "0.1.0",
          "private": true,
          "scripts": 
          "serve": "vue-cli-service serve",
          "development": "vue-cli-service serve --mode development",
          "build": "vue-cli-service build"
        ,
        "dependencies": 
          "@fortawesome/fontawesome-svg-core": "^1.2.36",
          "@fortawesome/free-solid-svg-icons": "^5.15.4",
          "@fortawesome/vue-fontawesome": "^3.0.0-5",
          "core-js": "^3.6.5",
          "vue": "^3.0.0",
          "vue-pdf": "^4.3.0",
          "vue-router": "^4.0.0-0",
          "vuex": "^4.0.0-0"
        ,
        "devDependencies": 
          "@vue/cli-plugin-babel": "~4.5.0",
          "@vue/cli-plugin-router": "~4.5.0",
          "@vue/cli-plugin-vuex": "~4.5.0",
          "@vue/cli-service": "~4.5.0",
          "@vue/compiler-sfc": "^3.0.0",
          "autoprefixer": "^9.8.6",
          "postcss": "^7.0.36",
          "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.7"
        

在我的 tailwind.config.js 中，我添加了一些颜色，默认情况下，我不再编辑。

      module.exports = 
         purge: [
           './src/**/*.html',
           './src/**/*.js',
         ],
         darkMode: false, // or 'media' or 'class'
         theme: 
           extend: ,
           backgroundColor: theme => (
              ...theme('colors'),
              'yellow-background': '#FEF48E',
              'red-headbar': '#90E39A',
              'green-body': '#EDD9A3',
              'post': '#FBE7C6'
           )
        ,
         variants: 
         extend: ,
         ,
         plugins: [],
       

【参考方案1】：

我认为您缺少将 tailwind css 导入您的项目。它可能是 App.vue 或 main.js 文件。您只需在脚本的行首添加以下内容。

import from './tailwind.css'

当然，tailwind.css 文件中应该插入以下代码。

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

【讨论】：

好的，谢谢，我按照你的方式修好了