Build dist vue with tailwindcss not working

user_13432258 0
Viewed 713

when built done, then css in tailwind is not display

In my package.json. I dont know build with tailwind look like, i just use the default.

       {
          "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"
        }

And in my tailwind.config.js, i add some color, and default, i dont edit anymore.

      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: [],
       }
tailwind-css vue.js
1 Answers

I think you're missing to import tailwind css into you project. It may be App.vue or main.js file. You just add below line top of your script.

import from './tailwind.css'

and of course in tailwind.css file should have below code inserted.

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