Closed prkhrv closed 1 week ago
Need Help
I have followed everything from the tutorial and I am getting this Screen as signup, most probably ShadCN default styling is not working.
This is my tailwind.config.js
tailwind.config.js
/** @type {import('tailwindcss').Config} */ const defaultTheme = require('tailwindcss/defaultTheme') module.exports = { darkMode: ['class'], content: [ './pages/**/*.{ts,tsx}', './components/**/*.{ts,tsx}', './@/components/**/*.{ts,tsx}', './app/**/*.{ts,tsx}', './src/**/*.{ts,tsx}', ], theme: { container: { center: true, padding: '2rem', screens: { '2xl': '1400px', }, }, extend: { colors: { 'primary-500': '#877EFF', 'primary-600': '#5D5FEF', 'secondary-500': '#FFB620', 'off-white': '#D0DFFF', 'red': '#FF5A5A', 'dark-1': '#000000', 'dark-2': '#09090A', 'dark-3': '#101012', 'dark-4': '#1F1F22', 'light-1': '#FFFFFF', 'light-2': '#EFEFEF', 'light-3': '#7878A3', 'light-4': '#5C5C7B', }, screens: { 'xs': '480px', }, width: { '420': '420px', '465': '465px', }, fontFamily: { inter: ['Inter', 'sans-serif'], }, keyframes: { 'accordion-down': { from: { height: 0 }, to: { height: 'var(--radix-accordion-content-height)' }, }, 'accordion-up': { from: { height: 'var(--radix-accordion-content-height)' }, to: { height: 0 }, }, }, animation: { 'accordion-down': 'accordion-down 0.2s ease-out', 'accordion-up': 'accordion-up 0.2s ease-out', }, }, }, plugins: [require('tailwindcss-animate')], };
And This is my vite.config.ts
vite.config.ts
import path from 'path'; import react from '@vitejs/plugin-react'; import { defineConfig } from 'vite'; export default defineConfig({ plugins: [react()], resolve: { alias: { '@': path.resolve(__dirname, './src'), }, }, });
Okay, so I fixed it by Re-installing the ShadCN components. as incorrect classNames were being used.
Need Help
I have followed everything from the tutorial and I am getting this Screen as signup, most probably ShadCN default styling is not working.
This is my
tailwind.config.js
And This is my
vite.config.ts