New Metronic Docs!Added Integration Docs with Starter Kits Apps for Laravel, Laravel Livewire, Angular, Vue, Symfony, Blazor Server, Django & Flask & more
Browse Docs
Light
Dark
System
Ask  Question

Metronic tailwind app.css compile error


hello, I'm trying to compile my app.css using latest vite and tailwind version, however its giving me an error, do you have any suggestion for a fix? Im using latest metronic tailwind build


[plugin:@tailwindcss/vite:generate:serve] Cannot apply unknown utility class `bg-background`. Are you using CSS modules or similar and missing `@reference`? 
/home/yanr/metronic-tailwind-laravel/resources/css/app.css


R
Ryann 5 days ago
Metronic Laravel Tailwind 4
4 Answers
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (4)

user
Faizal Author22 hours ago

Hi

The error occurs because your Tailwind configuration references CSS custom properties (--tw-color-background, --tw-color-foreground, etc.) that aren't defined in your app.css file.

Can you try to add missing CSS custom properties to your resources/css/app.css file.


/* CSS Custom Properties for Theme Colors */
:root {
 --tw-color-background: 255 255 255; /* white */
 --tw-color-foreground: 9 9 9; /* zinc-950 */
 --tw-color-muted-foreground: 113 113 122; /* zinc-500 */
 --tw-color-border: 244 244 245; /* zinc-100 */
 --tw-color-mono: 9 9 9; /* zinc-950 */
 --tw-color-secondary-foreground: 24 24 27; /* zinc-900 */
}

.dark {
 --tw-color-background: 9 9 9; /* zinc-950 */
 --tw-color-foreground: 248 250 252; /* zinc-50 */
 --tw-color-muted-foreground: 113 113 122; /* zinc-500 */
 --tw-color-border: 39 39 42; /* zinc-800 */
 --tw-color-mono: 212 212 216; /* zinc-300 */
 --tw-color-secondary-foreground: 248 250 252; /* zinc-50 */
}


Your CSS should now compile successfully with both npm run build and npm run dev
The theme colors will work properly in both light and dark modes
If you need to customize these colors, you can modify the RGB values in the CSS custom properties


R
Ryann 1 day ago

Hello,

I am still having the same issue. I'm using metronic-v9.3.5 demo 10 laravel

these are my settings


const defaultTheme = require("tailwindcss/defaultTheme");

module.exports = {
 content: [
 "./resources/views/**/*.blade.php",
 "./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php",
 "./resources/js/**/*.{js,jsx,ts,tsx,vue}",
 ],

 darkMode: "class",

 theme: {
 extend: {
 fontFamily: {
 sans: ["Roboto", ...defaultTheme.fontFamily.sans],
 serif: ["Merriweather", ...defaultTheme.fontFamily.serif],
 },

 /**
 * &eth;&#159;&#142;&uml; Updated color definitions for Tailwind 4
 * Using OKLCH ensures smoother color blending and contrast in dark mode.
 * The CSS variables remain the same; only the color function changed.
 */
 colors: {
 primary: "oklch(var(--tw-color-primary) / <alpha-value>)",
 background: "oklch(var(--tw-color-background) / <alpha-value>)",
 foreground: "oklch(var(--tw-color-foreground) / <alpha-value>)",
 "muted-foreground":
 "oklch(var(--tw-color-muted-foreground) / <alpha-value>)",
 "secondary-foreground":
 "oklch(var(--tw-color-secondary-foreground) / <alpha-value>)",
 border: "oklch(var(--tw-color-border) / <alpha-value>)",
 mono: "oklch(var(--tw-color-mono) / <alpha-value>)",
 },

 spacing: {
 5.5: "1.375rem",
 7.5: "1.875rem",
 },
 },
 },

 plugins: [
 require("@tailwindcss/forms"),
 require("@tailwindcss/typography"),
 require("@tailwindcss/aspect-ratio"),
 // Optional plugin you can enable later:
 // require("@tailwindcss/line-clamp"),
 ],

 safelist: [{ pattern: /^kt-/ }, { pattern: /^data-kt-/ }],
};



import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";

export default defineConfig({
 cacheDir: "node_modules/.vite", 
 server: {

 host: "0.0.0.0",

 port: 5173,
 hmr: {
 host: "localhost", 
 protocol: "http",
 port: 5173,
 },
 },
 plugins: [
 laravel({
 host: "127.0.0.1",

 dev_server: "127.0.0.1",

 detectTls: false,
 input: ["resources/css/app.css", "resources/js/app.js"],
 refresh: true,
 }),
 ],
 build: {
 rollupOptions: {
 external: [

 /^assets\//,
 ],
 },
 },
});



{
 "$schema": "
 "private": true,
 "type": "module",
 "scripts": {
 "dev": "vite dev --host",
 "build": "vite build",
 "start-all": "concurrently "php artisan serve" "npm run dev" "php artisan horizon" "php artisan reverb:start --port=9000 --debug""
 },
 "devDependencies": {
 "@tailwindcss/aspect-ratio": "^0.4.2",
 "@tailwindcss/forms": "^0.5.10",
 "@tailwindcss/line-clamp": "^0.4.4",
 "@tailwindcss/typography": "^0.5.19",
 "alpinejs": "^3.4.2",
 "autoprefixer": "^10.4.21",
 "axios": "^1.6.4",
 "blade-formatter": "^1.42.2",
 "concurrently": "^9.2.1",
 "laravel-echo": "^2.2.4",
 "laravel-vite-plugin": "^1.0",
 "postcss": "^8.5.6",
 "pusher-js": "^8.4.0",
 "tailwindcss": "^4.1.16",
 "vite": "^5.0"
 },
 "dependencies": {
 "alpinejs": "^3.13.3",
 "flatpickr": "^4.6.13"
 }
}



@tailwind base;
@tailwind components;
@tailwind utilities;

/* -----------------------------------------------------------------------
 DEV NOTE: THEME & GLOBAL VARIABLES (CRITICAL FOR CUSTOM COLORS)
----------------------------------------------------------------------- */
:root {
 /* --- THEME COLORS (GLOBAL) --- */
 --tw-color-background: 255 255 255; /* White (Example default) */
 --tw-color-foreground: 15 23 42; /* Slate-900 (Example default) */
 --tw-color-border: 255 0 0; /* FIX: More visible border color (Slate-300 RGB) */
 --high-contrast-shadow: 255, 255, 255;
 --font-sans: Roboto, ui-sans-serif, system-ui, sans-serif;
 /* ... define all other custom colors from tailwind.config.js here ... */
}

/* DEV NOTE: DARK MODE THEME */
.dark {
 --tw-color-background: 15 23 42; /* Slate-900 */
 --tw-color-foreground: 248 250 252; /* Slate-100 */
 --tw-color-border: 51 65 85; /* Stronger border for dark mode (Slate-700 RGB) */
 --high-contrast-shadow: 15, 23, 42;
}

/* -----------------------------------------------------------------------
 DEV NOTE: AVATAR SIZING VARIABLES (MUST BE HERE)
----------------------------------------------------------------------- */
:root {
 /* FIX: Re-inserting avatar color variables (using original hex values) */
 --color-circle-border: #f8f8f8; /* CRITICAL for avatar look */
 --color-edit-icon: #757575;

 /* --- DEFAULT LG SIZE (Used if no class is applied) --- */
 --img-size: 12rem;
 --border-width: 0.375rem;
 --btn-size: 2.56rem;
 --btn-offset-x: calc(var(--border-width) * 0.5);
 --btn-offset-y: calc(var(--border-width) * 0.5);
}

/* 2. AVATAR RESIZE CLASSES (Override the :root variables above) */
.avatar-size-xxl {
 --img-size: 16rem;
 --border-width: 0.5rem;
 --btn-size: 3.4rem;
}
.avatar-size-xl {
 --img-size: 14rem;
 --border-width: 0.4375rem;
 --btn-size: 2.9rem;
}
.avatar-size-lg {
 --img-size: 10rem;
 --border-width: 0.3125rem;
 --btn-size: 2.1rem;
}
.avatar-size-md {
 --img-size: 8rem;
 --border-width: 0.25rem;
 --btn-size: 1.7rem;
}
.avatar-size-sm {
 --img-size: 5rem;
 --border-width: 0.1875rem;
 --btn-size: 1.05rem;
}
.avatar-size-xsm {
 --img-size: 4rem;
 --border-width: 0.125rem;
 --btn-size: 0.875rem;
}

/* -----------------------------------------------------------------------
 [START] BASE STYLES & COMPONENTS
----------------------------------------------------------------------- */

@layer base {
 html {
 scroll-behavior: smooth;
 }
 body {
 text-rendering: optimizeLegibility;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 /* FIX: Ensure body background/text is set based on theme */
 @apply bg-background text-foreground;
 }
}

@layer components {
 /* --- METRONIC COMPONENTS (kt-*) --- */
 .kt-btn {
 @apply inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium transition-all duration-200
 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed;
 }

 .kt-btn2 {
 @apply inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium transition-all duration-200
 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-0 disabled:cursor-not-allowed;
 }
 .kt-btn-primary {
 @apply bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500;
 }
 .kt-btn-outline {
 @apply border border-border bg-transparent text-foreground hover:bg-background hover:text-foreground;
 }
 .kt-btn-ghost {
 @apply bg-transparent text-foreground hover:bg-background;
 }
 .kt-btn-icon {
 @apply p-2;
 }
 .kt-btn-sm {
 @apply px-3 py-1.5 text-xs;
 }

 /* --- CARDS, MENU, LAYOUT --- */
 .kt-card {
 @apply bg-background border border-border rounded-lg shadow-sm;
 }
 .kt-card-header {
 @apply flex items-center justify-between p-5 border-b border-border;
 }
 .kt-card-title {
 @apply text-lg font-semibold text-foreground;
 }
 .kt-card-content {
 @apply p-5;
 }
 .kt-card-footer {
 @apply flex items-center justify-between p-5 border-t border-border;
 }
 .kt-menu {
 @apply bg-background border border-border rounded-lg shadow-lg;
 }
 .kt-menu-item {
 @apply relative;
 }
 .kt-menu-link {
 @apply flex items-center px-4 py-2 text-sm text-foreground hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors;
 }
 .kt-menu-icon {
 @apply w-5 h-5 mr-3 text-muted-foreground;
 }
 .kt-menu-title {
 @apply flex-1;
 }
 .kt-menu-arrow {
 @apply ml-auto;
 }
 .kt-container-fixed {
 @apply container mx-auto px-4 lg:px-8;
 }
 .kt-header {
 @apply bg-background border-b border-border;
 }
 .kt-wrapper {
 @apply min-h-0;
 }
 .kt-link {
 @apply text-blue-600 hover:text-blue-800 font-medium transition-colors;
 }
 .kt-link-underlined {
 @apply underline;
 }
 .kt-link-dashed {
 @apply border-b border-dashed border-current;
 }
 .kt-toggle-group {
 @apply inline-flex rounded-lg border border-border;
 }
 .kt-toggle-group .kt-btn {
 @apply rounded-none border-0 first:rounded-l-lg last:rounded-r-lg;
 }

 .kt-drawer {
 min-width: 270px !important;
 /* You can adjust this 400px value to match the notifications */
 }

 /* === LOADING BUTTON COMPONENT (kt-btn-loading) === */
 .kt-btn-loading {
 @apply relative pointer-events-none overflow-hidden;
 padding: 0 !important;
 }
 .kt-btn-loading .kt-btn-text {
 display: none !important;
 }
 .kt-loader-content {
 @apply absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2
 flex items-center justify-center gap-1; /* OPTIMIZATION: Using tailwind gap-1 (4px) */
 color: inherit;
 white-space: nowrap;
 }
 .kt-loader-dot {
 /* FIX: Ensure kt-loader-dot has the necessary size and background properties */
 width: 0.5rem;
 height: 0.5rem;
 background-color: currentColor; /* Use text color */
 border-radius: 9999px;
 animation: dot-pulse 1.4s ease-in-out infinite;
 }
 .kt-loader-dot:nth-child(1) {
 animation-delay: -0.32s;
 }
 .kt-loader-dot:nth-child(2) {
 animation-delay: -0.16s;
 }
 /* Keyframes are often defined outside layers or within a global context */
 @keyframes dot-pulse {
 0%,
 80%,
 100% {
 transform: scale(0);
 }
 40% {
 transform: scale(1);
 }
 }

 /* -----------------------------------------------------------------------
 [START] AVATAR/IMAGE UPLOADER COMPONENT STYLES
 ----------------------------------------------------------------------- */
 /* AVATAR WRAPPER */
 .avatar-upload {
 position: relative;
 width: var(--img-size);
 height: var(--img-size);
 }

 /* PREVIEW CONTAINER */
 .avatar-preview-size {
 width: 100%;
 height: 100%;
 border-radius: 9999px;
 overflow: hidden;
 border-width: var(--border-width);
 border-color: var(--color-circle-border);
 background-color: white; /* CRITICAL: Background color for the default state */
 box-shadow:
 0px 4px 10px 0px rgba(0, 0, 0, 0.15),
 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
 }

 /* BUTTON PLACEMENT */
 .avatar-edit {
 position: absolute;
 top: 0;
 right: 0;
 z-index: 10;
 }

 /* EDIT BUTTON STYLE */
 .edit-button-style {
 width: var(--btn-size);
 height: var(--btn-size);
 transform: translate(var(--btn-offset-x), var(--btn-offset-y));
 @apply bg-white shadow-lg cursor-pointer transition-all duration-200 border-2 rounded-full;
 }

 /* Icon inside the button scales with the button size */
 .edit-button-style svg {
 width: 40%;
 height: 40%;
 }
 .error-message {
 transition: all 0.3s ease-in-out;
 }

 /* === CSS-DRIVEN STATE LOGIC === */
 /* Icon Visibility */
 .avatar-upload:not(.is-uploaded) [data-icon="remove"] {
 display: none !important;
 }
 .avatar-upload.is-uploaded [data-icon="pencil"] {
 display: none !important;
 }
 /* Button Hover & Style Logic */
 .avatar-upload.is-uploaded [data-action="edit-button"] {
 @apply border-red-200;
 }
 .avatar-upload.is-uploaded [data-action="edit-button"]:hover {
 @apply bg-red-100;
 }
 .avatar-upload:not(.is-uploaded) [data-action="edit-button"] {
 @apply border-gray-200;
 }
 .avatar-upload:not(.is-uploaded) [data-action="edit-button"]:hover {
 @apply bg-gray-100;
 }
 /* Cursor Logic */
 .avatar-upload:not(.is-uploaded) [data-action="preview-container"] {
 cursor: pointer;
 }
 .avatar-upload.is-uploaded [data-action="preview-container"] {
 cursor: default;
 }
} /* End of @layer components */

/* -----------------------------------------------------------------------
 [START] UTILITIES & MISC. CSS
----------------------------------------------------------------------- */

@layer utilities {
 /* Custom spacing utilities are preserved */
 .space-x-2\.5 > * + * {
 margin-left: 0.625rem;
 }
 .gap-7\.5 {
 gap: 1.875rem;
 }
 /* Scrollbar utilities are preserved */
 .scrollbar-hidden {
 -ms-overflow-style: none;
 scrollbar-width: none;
 }
 .scrollbar-hidden::-webkit-scrollbar {
 display: none;
 }

 /* --- CUSTOM CSS FOR USER MANAGER --- */
 .container-wrapper {
 max-width: 100%;
 padding: 1rem 2rem;
 }
 /* Avatar alignment styles are preserved */
 .avatar-align-left {
 margin-left: 0 !important;
 margin-right: 0 !important;
 }
 .avatar-align-center {
 margin-left: auto !important;
 margin-right: auto !important;
 }
 /* Tab marker is preserved */
 .active-tab-marker {
 border-bottom: 3px solid #10b981; /* Preserve original hard-coded values */
 color: #1e293b;
 font-weight: 600;
 }
 .dense-table th,
 .dense-table td {
 padding-top: 0.6rem;
 padding-bottom: 0.6rem;
 }
 .custom-scrollbar::-webkit-scrollbar {
 width: 6px;
 height: 6px;
 }
 .custom-scrollbar::-webkit-scrollbar-thumb {
 background-color: #94a3b8;
 border-radius: 3px;
 }

 /* &eth;&#159;&#146;&iexcl; PATCH: GRADIENT STYLES MOVED HERE TO FIX SYNTAX ERROR */

 .conic-gradient {
 background: conic-gradient(
 from 45deg at 20% 40%,
 /* Shift center */ #ff7e5f 0deg 90deg,
 #feb47b 90deg 180deg,
 #86a8e7 180deg 270deg,
 #7f7fd5 270deg 360deg
 );
 }

 .linear-gradient {
 background: linear-gradient(
 120deg,
 #ff7e5f 25%,
 #feb47b 25%,
 #feb47b 50%,
 #86a8e7 50%,
 #86a8e7 75%,
 #7f7fd5 75%
 );
 }

 .text-shadow-high-contrast {
 /* Creates a soft white halo/shadow around the text */
 text-shadow:
 1px 1px 0 #fff,
 /* Shadow Right-Bottom */ -1px -1px 0 #fff,
 /* Shadow Left-Top */ 1px -1px 0 #fff,
 /* Shadow Right-Top */ -1px 1px 0 #fff,
 /* Shadow Left-Bottom */ 0 0 5px rgba(0, 0, 0, 0.4); /* Optional: Slight dark blur for extra depth */

 /* Ensure the text itself is dark for contrast against the white shadow,
 but I"ll keep the text color undefined so it uses your Tailwind defaults.
 If your text is light, you might need to set "color: #1f2937;" (dark gray). */
 }
} /* End of @layer utilities */

/*
 =======================================
 Custom CSS for Overflow Chat Bubbles
 =======================================
*/

/* 1. The container for the avatar and button */
.overflow-bubble-container {
 position: relative; /* Establishes a positioning context */
 height: 3rem; /* 48px, same as h-12 */
 width: 3rem; /* 48px, same as w-12 */
 cursor: pointer;
}

/* 2. The close button itself */
.overflow-bubble-close-btn {
 /* Core styles from your theme */
 display: inline-flex;
 align-items: center;
 justify-content: center;
 border-radius: 9999px; /* rounded-full */
 background-color: #ef4444; /* bg-red-500 */
 color: #ffffff; /* text-white */
 font-size: 0.75rem; /* text-xs */
 height: 1.25rem; /* h-5 */
 width: 1.25rem; /* w-5 */

 /* Positioning */
 position: absolute;
 top: -0.25rem; /* -top-1 */
 right: -0.25rem; /* -right-1 */
 z-index: 10; /* Keeps it on top of the image */

 /* The "Magic" */
 opacity: 0;
 transition: all 0.2s ease-out;
 transform: scale(0.8); /* Make it small to start */
}

/* 3. The Hover Effect */
.overflow-bubble-container:hover .overflow-bubble-close-btn {
 opacity: 1;
 transform: scale(1); /* Grow to full size on hover */
}

/* 4. (Optional) A hover effect for the button itself */
.overflow-bubble-close-btn:hover {
 transform: scale(1.1); /* Slightly larger on direct hover */
}


user
Sean Author1 day ago

Hi,

For Tailwind integration can you please check ?

If the issue still persists please provide us more info such as your Metronic version, etc

Regards,
Sean


R
Ryann 5 days ago

I got a new error now


[plugin:@tailwindcss/vite:generate:serve] Can"t resolve "tailwindcss" in "/home/yanr/metronic-tailwind-laravel/resources/css"
/home/yanr/metronic-tailwind-laravel/resources/css/app.css
 at finishWithoutResolve (/home/yanr/metronic-tailwind-laravel/node_modules/enhanced-resolve/lib/Resolver.js:565:18)
 at /home/yanr/metronic-tailwind-laravel/node_modules/enhanced-resolve/lib/Resolver.js:657:14
 at /home/yanr/metronic-tailwind-laravel/node_modules/enhanced-resolve/lib/Resolver.js:718:5
 at eval (eval at create (/home/yanr/metronic-tailwind-laravel/node_modules/tapable/lib/HookCodeFactory.js:31:10), <anonymous>:15:1)
 at /home/yanr/metronic-tailwind-laravel/node_modules/enhanced-resolve/lib/Resolver.js:718:5
 at eval (eval at create (/home/yanr/metronic-tailwind-laravel/node_modules/tapable/lib/HookCodeFactory.js:31:10), <anonymous>:27:1)





/* =============================================================================
 1. Tailwind v4 SOURCE PATHS (required for scanning utilities)
 ============================================================================= */
@source "../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php";
@source "../../storage/framework/views/*.php";
@source "../**/*.blade.php";
@source "../**/*.js";
@source "../../vendor/livewire-filemanager/filemanager/resources/views/**/*.blade.php";

/* =============================================================================
 2. Import Tokens BEFORE Tailwind
 ============================================================================= */
@import "./tokens.css";

/* =============================================================================
 3. Tailwind Core (ONLY this import in v4.1)
 ============================================================================= */
@import "tailwindcss";

/* =============================================================================
 4. Global CSS Variables (Light Mode)
 ============================================================================= */
:root {
 --tw-color-background: 255 255 255;
 --tw-color-foreground: 15 23 42;
 --tw-color-border: 226 232 240;

 --font-sans: Roboto, ui-sans-serif, system-ui, sans-serif;

 /* Avatar sizing */
 --color-circle-border: #f8f8f8;
 --color-edit-icon: #757575;
 --img-size: 12rem;
 --border-width: 0.375rem;
 --btn-size: 2.56rem;
 --btn-offset-x: calc(var(--border-width) * 0.5);
 --btn-offset-y: calc(var(--border-width) * 0.5);
}

/* =============================================================================
 5. Dark Mode Overrides
 ============================================================================= */
.dark {
 --tw-color-background: 15 23 42;
 --tw-color-foreground: 248 250 252;
 --tw-color-border: 51 65 85;
}

/* =============================================================================
 6. Base Layer
 ============================================================================= */
@layer base {
 html {
 scroll-behavior: smooth;
 }

 body {
 @apply bg-background text-foreground font-sans;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 }
}


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(