Taildown - Markdown Editor with Tailwind CSS

In the world of web development, creating and managing Markdown content can often be a cumbersome task. That's why I created Taildown - a simple yet powerful Markdown editor built with React and Tailwind CSS**.**

Why Taildown?

Taildown is designed to provide a seamless experience for editing, previewing, and exporting Markdown content. With Taildown, you can enjoy the flexibility of customizing styles using Tailwind CSS classes, making it easier than ever to manage your Markdown documents.

Taildown uses Tailwind CSS classes to effortlessly style your Markdown content. This means you can achieve consistent and beautiful styling with minimal effort, leveraging the power and flexibility of Tailwind CSS.

Key Features

• Edit Mode: Write and edit your Markdown content with a real-time preview.
• Preview Mode: View a live preview of your Markdown content rendered with Tailwind CSS styles.
• Code Mode: Inspect the generated HTML code with syntax highlighting and line numbers.
• Config Mode: Customize Tailwind CSS classes for different Markdown elements.

Getting Started

To start using Taildown, follow these simple steps:

1. Clone the repository:

   git clone https://github.com/your-username/taildown.git
   

2. Install dependencies:

   npm install
   

3. Start the development server:

   npm start
   

Usage Guide

Markdown Editing

1. Heading Tags:

   • H1: Click on the "H1" button or type # at the beginning of a line.
   • H2: Click on the "H2" button or type ## at the beginning of a line.
   • H3: Click on the "H3" button or type ### at the beginning of a line.

2. Insert Image:

   • Click on the image icon or type ![Alt Text](image.png).

3. Insert Link:

   • Click on the link icon or type [Link Text](example.com).

4. Insert Table:

   • Click on the table icon or type:

     |   |   |   |
     |---|---|---|
     

5. Customization:

   • Change the Tailwind CSS classes for each Markdown element in the Config Mode.

Preview Mode

• Click on the eye icon to switch to Preview Mode and see your Markdown content rendered with Tailwind CSS styles.

Code Mode

• Click on the code icon to switch to Code Mode and inspect the generated HTML code with syntax highlighting and line numbers.

Download

• Download your content in either Markdown or HTML format using the download button**.**

Try Taildown Today!

Ready to experience the power of Taildown? Visit the live demo and start creating beautiful Markdown content with ease. Taildown - the Markdown editor that combines the simplicity of Markdown with the flexibility of Tailwind CSS.