Heading 1 - Main Title

This is a regular paragraph. Tailwind CSS has transformed the way developers approach styling. Instead of writing custom CSS, you compose designs using utility classes directly in your markup.

---

Heading 2 - Text Styling

This section demonstrates bold text and italic text. You can also combine them for bold and italic together.

Here's an example of inline code within a paragraph. Use it to highlight variable names like useState or file names like package.json.

---

Heading 2 - Links

Check out these links:

• Visit Google for searching
• Read more on MDN Web Docs
• Go to my portfolio to learn more about me

---

Heading 2 - Unordered Lists

Below is an unordered (bullet) list:

• Bloated stylesheets
• Naming conflicts
• Unused styles
• Inconsistent designs

---

Heading 2 - Ordered Lists

Below is an ordered (numbered) list:

1. Use @apply sparingly - Keep utilities in your markup when possible
2. Create design tokens - Use tailwind.config.js for consistent values
3. Extract components - When patterns repeat, create reusable components
4. Use arbitrary values wisely - w-[137px] should be rare

---

Heading 2 - Code Blocks

Here's a code block with HTML:

<div class="w-full sm:w-1/2 lg:w-1/3">
  <!-- Full width on mobile -->
  <!-- Half width on small screens -->
  <!-- One-third on large screens -->
</div>

Here's a code block with JavaScript:

const greeting = "Hello, World!";

function sayHello(name) {
  console.log(`${greeting} Welcome, ${name}!`);
  return true;
}

sayHello("Developer");

Here's a code block with CSS:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

---

Heading 2 - Blockquotes

Pro tip: This is how a blockquote looks. Use it for important notes, quotes, or callouts that you want to stand out from the rest of the content.

Regular blockquote without bold text. This can be used for testimonials or citations.

---

Heading 2 - Tables

Here's a comparison table:

| Feature | React | Vue | Svelte | |---------|-------|-----|--------| | Virtual DOM | Yes | Yes | No | | Bundle Size | Large | Medium | Small | | Learning Curve | Moderate | Easy | Easy | | TypeScript Support | Excellent | Good | Good |

Another table with different data:

| Command | Description | |---------|-------------| | npm install | Install dependencies | | npm run dev | Start development server | | npm run build | Build for production | | npm test | Run tests |

---

Heading 2 - Images

Below is an example of how images are displayed:

A beautiful landscape showing mountains and a lake

---

Heading 2 - Combined Example

This section combines multiple components together:

1. First, install the dependencies:

npm install tailwindcss postcss autoprefixer

1. Then, create your config file:

module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

1. Finally, add Tailwind to your CSS:

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

Note: Make sure to restart your development server after making configuration changes.

For more information, visit the Tailwind CSS Documentation.

---

Conclusion

This test blog demonstrates all available MDX components:

• Headings (h1, h2)
• Paragraphs with text
• Bold and italic text
• Inline code snippets
• Links to other pages
• Unordered and ordered lists
• Code blocks with syntax highlighting
• Blockquotes for callouts
• Tables for data comparison
• Images with captions
• Horizontal rules for section breaks

Thanks for reading!