[Question] VechaiUI didn't style the components?

[samzhangjy]

Hello. I followed the steps in the documentation and tried to install VechaiUI. However, when I run the app, the components aren't styled:

First, I created a blank project using npx create-react-app.

Then I installed the library using yarn:

yarn add @vechaiui/core @vechaiui/react @tailwindcss/forms

And I'm using the very same code as shown in the documentation:

// ./src/App.js
import * as React from "react";
import { VechaiProvider, Button } from "@vechaiui/react";

function App() {
  return (
    <VechaiProvider>
      <Button>Hello Vechai</Button>
    </VechaiProvider>
  );
}

export default App;

And my tailwind.config.js is also copied from the docs:

module.exports = {
  theme: {
    mode: "jit",
    purge: [
      //
      "./node_modules/@vechaiui/**/*.{js,ts,jsx,tsx}", // path to vechaiui
    ],
    darkMode: "class",
    // ...
  },
  // add VechaiUI plugin
  plugins: [
    require("@tailwindcss/forms"),
    require("@vechaiui/core"),
    // ...
  ],
};

The buttons have the btn btn-md btn-outline classes, and everything seem to work, except the style... (sorry for this terrible English...)

Sorry if I misunderstood something in the docs.... I'm actually a beginner in React. I just can't find a solution for this one...

[pepelele]

@samzhangjy oops sorry my I copied wrong config
tailwind.config.js should be:

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

I put all config in theme 😂

[pepelele]

You must include Tailwind in your CSS... more about tailwind document https://tailwindcss.com/docs/installation#include-tailwind-in-your-css

[samzhangjy]

Thank you... Sam Zhang

…

________________________________ From: pepelele ***@***.***> Sent: Thursday, July 8, 2021 10:20:17 PM To: vechai/vechaiui ***@***.***> Cc: Sam Zhang ***@***.***>; Mention ***@***.***> Subject: Re: [vechai/vechaiui] [Question] VechaiUI didn't style the components? (#22) Closed #22<#22>. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#22 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/ANQCYENR7NN6DIYHGWNXWKDTWWX2DANCNFSM5AAX6TQA>.