@jinhang/vuepress-plugin-tailwind

Demo

In markdown

You can use classes of tailwindcss in your markdown.

code

<div class="mx-2 text-red-700">red text!</div>
1

result

red text!

In components

You can also use them in the components.

code

Definition:

<!-- .vuepress/components/RedText.vue -->

<template>
  <div class="mx-2 text-red-700">{{ text }}</div>
</template>

<script setup>
const props = defineProps({
  text: String,
})
</script>
1
2
3
4
5
6
7
8
9
10
11

Use:

<RedText text="Red text in component!" />
1

result

Red text in component!

More complex example

code

<div class="flex">
  <RedText text="Red flex 1!" />
  <RedText text="Red flex 2!" class="transform rotate-90 my-8" />
  <RedText text="Red flex 3!" class="bg-yellow-300"/>
</div>
1
2
3
4
5

result

Red flex 1!
Red flex 2!
Red flex 3!