Pricing Page bug

[eskiesirius]

What component (if applicable)

• URL for category: https://tailwindui.com/components/marketing/page-examples/pricing-pages#component-c33e7238bc464b73c63e258b8df85ed1
• Component name: With four tiers and feature list

Describe the bug Using the code in that component doesn't show the correct display

To Reproduce Steps to reproduce the behavior:

1. Copy the code
2. Paste it in your project
3. Compile

Expected behavior It should display same as the tailwindui

Screenshots

Browser/Device (if applicable)

• OS: [e.g. iOS] Windows 10
• Browser [e.g. chrome, safari]: Chrome
• Version [e.g. 22]: 104.0.5112.81

Additional context None

[thecrypticace]

Hey! Appreciate the report — this seems super odd but I'm not able to reproduce this.

Looking at your screenshot it appears you have some colors missing and possibly some other size-related utilities that are missing. It seems likely you have a customized config that has replaced or disabled some of the required colors and sizes. I tested this using Vue's SFC explorer by copying & pasting the code from Tailwind UI into App.vue and made the following tweaks to make sure it renders correctly.

Update the import map to include Vue 3.2+, Headless UI Vue 1.6+, and Heroicons Vue 1.0.6+ (this just tells Vue's SFC explorer where to find packages):

{
  "imports": {
    "vue": "https://unpkg.com/@vue/runtime-dom@3.2.37/dist/runtime-dom.esm-browser.js",
    "@headlessui/vue": "https://unpkg.com/@headlessui/vue@1.6.7/dist/headlessui.esm.js",
    "@heroicons/vue/outline": "https://unpkg.com/@heroicons/vue@1.0.6/outline/esm/index.js",
    "@heroicons/vue/solid": "https://unpkg.com/@heroicons/vue@1.0.6/solid/esm/index.js",
    "vue/server-renderer": "https://sfc.vuejs.org/server-renderer.esm-browser.js"
  }
}

Update the <script> section to pull in the CDN for test purposes:

import { CheckIcon as CheckIconSolid, ChevronDownIcon } from '@heroicons/vue/solid'  

+ let script = document.createElement("script")
+ script.src = "https://cdn.tailwindcss.com/3.1.8"
+ script.defer = true
+ document.body.append(script)

Here's a small snippet / screenshot of what I see:

[eskiesirius]

i see.. actually here is my package.json file

{
    "private": true,
    "scripts": {
        "dev": "vite --host",
        "build": "vite build && vite build --ssr"
    },
    "devDependencies": {
        "@inertiajs/inertia": "^0.11.0",
        "@inertiajs/inertia-vue3": "^0.6.0",
        "@inertiajs/progress": "^0.2.7",
        "@inertiajs/server": "^0.1.0",
        "@tailwindcss/forms": "^0.5.2",
        "@tailwindcss/typography": "^0.5.2",
        "@vitejs/plugin-vue": "^3.0.0",
        "@vue/server-renderer": "^3.2.31",
        "autoprefixer": "^10.4.7",
        "axios": "^0.27",
        "laravel-vite-plugin": "^0.5.0",
        "lodash": "^4.17.19",
        "postcss": "^8.4.14",
        "tailwindcss": "^3.1.0",
        "vite": "^3.0.0",
        "vue": "^3.2.31"
    },
    "dependencies": {
        "@headlessui/vue": "^1.6.7",
        "@heroicons/vue": "^1.0.6"
    }
}

i am using laravel sail, jetstream

[eskiesirius]

so weird.. it is ok now.. thank you for replying..