Components doesn't work

[Igor Makowski]

Hi I used the Button component and It didn't apply style on it.

_app.tsx

import React from 'react'
import type { AppProps } from 'next/app'
import { VechaiProvider, Button } from '@vechaiui/react'

export default function App({ Component, pageProps }: AppProps) {
  return (
    <VechaiProvider>
      <Button>e</Button>
      <Component {...pageProps} />
    </VechaiProvider>
  )
}

tailwind.config.ts

export default {
  mode: 'jit',
  purge: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    './node_modules/@vechaiui/**/*.{js,ts,jsx,tsx}',
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [require('@tailwindcss/forms'), require('@vechaiui/core')],
}

[pepelele]

You must import tailwind styles in _app.tsx

import '../styles/globals.css';

globals.css

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

You can check basic setup here: https://stackblitz.com/edit/nextjs-pvx8qa?file=pages%2Findex.js

[Igor Makowski]

Yes I fixed that, and for now I see that tailwindcss styles applies, but venchaui doesn't

[pepelele]

You can download the demo or playground with stackblitz link ... I don't have enough context to find this bug

[Igor Makowski]

I see that config i recreated it, and it still doesn't work.

[Igor Makowski]

Ok, so to fix that error I was forced to create a new project.

[xingfrontend]

i meet the same problem, did you solve it ?

Ok, so to fix that error I was forced to create a new project.

[xingfrontend]

i forget add VechaiProvider, after adding it, some styles apply, but still any styles didn't work，like color. But i really need a ui library, so i copy all styles from the website vechaiui.com 😂

[Mohsen]

This is what you need to have in your tailwind.config.js:

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

[xingfrontend]

This is what you need to have in your tailwind.config.js:

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

Yes, the tailwind.config.js always has the config like this,but some styles don't work

the icon is plain