Question 303124 in CSS Question posted in
Some basic documentation can be found here.

TailwindCSS in Vitepress

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:

enter image description here

/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

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I had to add 2 files:

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

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

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

    import './custom.css'

import DefaultTheme from 'vitepress/theme'

export default { ...DefaultTheme }

    then tailwind styles started working


  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search