Try Tails Devtools - Browser extension for Tailwind CSS Developer

Getting Started


VechaiUI works out of the box with create-react-app (including TypeScript version), Preact cli (with compat), Next.js, Gatsby and any other environment.

To install the VechaiUI run the following within your project directory.

npm i @vechaiui/core @vechaiui/react @tailwindcss/forms# ORyarn add @vechaiui/core @vechaiui/react @tailwindcss/forms


The default theme of this library depends on the @tailwindcss/forms plugin. To use it, follow the steps on the plugin source page.

Vechai UI can be configed in tailwind.config.js:

// tailwind.config.jsmodule.exports = { mode: "jit", purge: [ // ... "./node_modules/@vechaiui/**/*.{js,ts,jsx,tsx}", // path to vechaiui ], darkMode: "class", // or 'media' or 'class' theme: { extend: {}, }, variants: { extend: {}, }, plugins: [ require("@tailwindcss/forms"), require("@vechaiui/core"), ],};

Note: VechaiUI required jit mode and tailwindcss version 2.1.4 or higher (basic mode seems buggy when compiling some components)

Quick start

Here's a quick example to get you started, it's literally all you need:

import * as React from "react";import { VechaiProvider, Button } from "@vechaiui/react";function App() { return ( <VechaiProvider> <Button>Hello Vechai</Button> </VechaiProvider> );}