Tailwindcss Support

[seekerquest]

Does anyone know how to integrate tailwindcss with vitepress v1.0 ?

The tuts available online seem to be out of date with v1.0

Perhaps a good idea to include a section in the docs for future releases.

Any help is much appreciated!!

[taskylizard]

You can just follow tailwindcss' guide.

[adiroiban]

There is one thing to consider.
If you are using srcDir and custom layouts you will need to update your style.css to tell tailwind where to look for the HTML code

My style.css looks something like this

@import "./switzer-font.css";
@import "tailwindcss";
@source "../";


@theme {

  /* My custom font and home layout */
  --font-sans: Switzer-Regular, system-ui,sans-serif;
  --color-hero-from: var(--color-sky-200);
  --color-hero-via: var(--color-amber-300);
  --color-hero-to: var(--color-sky-900);
}

/*
Integration with 3rd party UIs, like Algolia Docsearch
*/

.DocSearch {
  --docsearch-primary-color: var(--vp-c-brand-1) !important;
}