Skip to content

Tailwind CSS plugin that creates a styled documentation page from the raw HTML code. https://bit.ly/rd_demo

License

Notifications You must be signed in to change notification settings

WebPraktikos/tailwindcss-rich-docs

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

30 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Tailwind CSS Rich Docs

Attention: This project is at an early stage of development.

tailwindcss-rich-docs is a Tailwind CSS plugin that provieds rich-docs class which can be used to style row (vanilla) HTML code with the documentation type of content.

Demo

How to use it?
Add the rich-docs class to the container of the raw HTML code (without styles).

How to use the same font as on the demo site?
Add the following code to the <head> HTML element:

<link href="https://fonts.googleapis.com/css?family=Fira+Sans:200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i&display=swap" rel="stylesheet">

Setup

Install the tailwindcss-rich-docs npm package:

npm install tailwindcss-rich-docs

Include it in your tailwind.config.js:

module.exports = {
  theme: {},
  variants: {},
  plugins: [
    require("tailwindcss-rich-docs")
  ]
};

Add the rich-docs class:

<div class="rich-docs">
  <!-- markdown to html output, maybe -->
</div>

Embed a Video

To embed a video iframe or any other iframe, wrap the iframe with a div. Then, add theiframe-parent class to that div. Next, specify the aspect ratio under the style attribute. Finally, remove width, height, and other styles from the iframe.

<div class="iframe-parent" style="--aspect-ratio-horizontal: 16; --aspect-ratio-vertical: 9;">
  <!-- Example iframe -->
  <iframe src="https://www.youtube.com/embed/MURPf_6r8z4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

About

Tailwind CSS plugin that creates a styled documentation page from the raw HTML code. https://bit.ly/rd_demo

Resources

License

Stars

Watchers

Forks

Packages

No packages published