Production tailwind css not displaying correctly on production

Question

So, I noticed some of my tailwind css is not generating properly on production but appearing well on my local any ideas ? I am using, vue + tailwind + laravel + inertia stack. Also I'm not experienced in deploying anything on production, so thus I am using digital ocean's new "Apps" thing.

Production

• Ubuntu 18.04.5 LTS
• Node Version: 12.22.5

Local

• Ubuntu 20.04.2 LTS
• Node Version: v16.7.0

What it's suppose to look like ( Local )

What it turned up like ( Production )

Here is my tailwind.config.js

module.exports = {
  purge: [
    './resources/**/*.blade.php',
    './resources/**/*.js',
    // './resources/**/*.vue',
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      colors: {
        gray: {
          750: '#2d3748',
          850: '#1a202c'
        },
      },
      spacing: {
        112: '28rem',
        120: '30rem',
        128: '32rem',
        136: '34rem',
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Commands I run on build production

Build Command
composer install --optimize-autoloader
composer dump-autoload --optimize
php artisan config:cache
php artisan route:cache
php artisan view:cache
php artisan optimize
php artisan migrate
npm install --no-optional
npm run production

php artisan ziggy:generate

Index.vue

<template>
    <div class="min-h-screen bg-white pt-12">
        <Navbar class="mb-2"/>
        <div class="flex flex-row lg:mx-40 md:mx-10">
            <div class="md:w-64 w-2/12">
                <div class="bg-gray-300 h-screen flex flex-col p-4 space-y-10">
                    <div>
                        <span>
                            <b>Categories</b>
                        </span>
                        <div class="flex flex-col space-y-2 cursor-pointer" v-for="category in categories">
                            <span @click="filterCategory(category)">{{ category.name }}</span>
                        </div>
                    </div>
                    <div>
                        <span>
                            <b>Price Range</b>
                        </span>
                        <div class="flex flex-col font-semibold">
                            Minimum Price<input type="text" name="min" placeholder="Min" v-model="filters.minPrice" class="rounded-xl px-2">
                            Maximum Price<input type="text" name="min" placeholder="Max" v-model="filters.maxPrice" class="rounded-xl px-2">
                        </div>
                        <button class="p-0.5 px-2 mt-2 bg-gray-600 text-gray-300 rounded-xl" @click="filter">Filter</button>
                        <button class="p-0.5 ml-2 px-2 mt-2  text-gray-600 rounded-xl" @click="clearPrice">Clear</button>
                    </div>
                </div>
            </div>
            <div class="w-10/12 flex flex-col">
                <div class="flex flex-row items-center pl-2">
                    Search <input v-model="filters.search" @keyup="filter" type="text" name="min" placeholder="Search Products" class="border border-gray-400 rounded-xl p-1 m-2 w-full">
                </div>
                <FilterTags :filters="filters" @remove="removeCategory"/>
                <div class="flex flex-wrap h-1/3 cursor-pointer">
                    <div v-for="product in products.data" class="w-1/5">
                        <ProductCard class="m-4" :name="product.name" :price="product.price" :currency="'RM'"  @click="viewDetails(product.id)"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Navbar from '@/Components/Shop/Navbar';
import ProductCard from '@/Components/Shop/ProductCard';
import FilterTags from '@/Components/Shop/FilterTags';
import { debounce } from 'lodash';

export default {
    components: {
        Navbar,
        ProductCard,
        FilterTags,
    },
    props: {
        products: {
            type: Object,
            default: {}
        },
        categories: {
            type: Object,
            default: {}
        },
        filters: {
            type: Object,
            default: {}
        }
    },
    data() {
        return {
        }
    },
    mounted () {
    },
    methods: {
        filter: debounce( function() {
            this.$inertia.get(route('playground.shop.index'), this.filters, { preserveState: true });
        }, 300),
        filterCategory: debounce( function(category) {
            this.filters.categories.push(category.name);
            this.filter();
        }, 200),
        removeCategory(removedCategory) {
            this.filters.categories = this.filters.categories.filter(function(category) {
                return category != removedCategory;
            });
            this.filter();
        },
        clearPrice() {
            this.filters.minPrice = null;
            this.filters.maxPrice = null;
            this.filter();
        },
        viewDetails(product) {
            this.$inertia.visit(route('playground.shop.product.show', product));
        }
    },

}
</script>

Answer 1

I'm guessing you forgot to uncomment the line that prevents PostCSS from purging the Tailwind classes you're using on your Vue files.

// Change this:
module.exports = {
  purge: [
    './resources/**/*.blade.php',
    './resources/**/*.js',
    // './resources/**/*.vue',
  ]
}

// to this:
module.exports = {
  purge: [
    './resources/**/*.blade.php',
    './resources/**/*.js',
    './resources/**/*.vue'
  ]
}