TailwindCSS in Vitepress

Question

I'm trying to get tailwind to work within markdown files rendered by vitepress. There are some sources online of how to make it work, none of which work for me.

/docs directory structure:

/docs/global/inputs/primary-button.md:

# primary-button

## Props

| Prop name | Description | Type  | Values | Default |
| --------- | ----------- | ----- | ------ | ------- |
| type      |             | union | -      |         |

## Slots

| Name    | Description | Bindings |
| ------- | ----------- | -------- |
| default |             |          |

---

<button class="bg-green-500">
hello world
</button>

the content of the button gets displayed but not the green background color.

tailwind.config.cjs:

/** @type {import('tailwindcss').Config} */

const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
  content: [
    './src/**/*.{html,ts,vue}',
    './docs/**/*.{html,js,vue,ts,md}',
    './docs/.vitepress/**/*.{html,js,vue,ts,md}',
  ],
  theme: {...},
  plugins: [],
}

/docs/.vitepress/config.ts:

import { defineConfig } from 'vitepress'
import { buildSidebarConfig } from '../../src/lib/vitepressSidebar'

// https://vitepress.dev/reference/site-config
export default defineConfig({
  base: '/docs/',
  title: 'Trinity UI Documentation',
  titleTemplate: ':title',
  lastUpdated: true,
  themeConfig: {
    // https://vitepress.dev/reference/default-theme-config
    logo: '/.vitepress/logo.ico',
    siteTitle: 'Trinity UI Docs',
    // nav: [{ text: 'Home', link: '/' }],
    sidebar: [
      {
        items: buildSidebarConfig('src/components'),
      },
    ],
    socialLinks: [
      { icon: 'github', link: 'https://github.com/vuejs/vitepress' },
    ],
  },
})

sources for setup:

https://github.com/ky-is/vitepress-starter-tailwind/tree/main

https://tailwindcss.com/docs/upgrade-guide#configure-content-sources

https://codybontecou.com/tailwindcss-with-vitepress.html

Answer 1

I had to add 2 files:

/docs/.vitepress/theme/custom.css:

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

/docs/.vitepress/theme/index.ts:

import DefaultTheme from 'vitepress/theme'
import './custom.css'
export default DefaultTheme

then tailwind styles started working

Answer 2

Follow the steps below :

1. Install Tailwind CSS

$ npm install -D tailwindcss postcss autoprefixer
$ npx tailwindcss init

2. Add Tailwind to your PostCSS configuration

// postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

3. Configure your template paths

// tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

4. Add the Tailwind directives to your CSS

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

Ref. https://tailwindcss.com/docs/installation/using-postcss

Answer 3

For 3. Configure your template paths

You will to add the vue files extension.

So the configuration would be:

// tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js,vue}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

I noticed the html and JS extensions were not needed in vitepress.