Reuseable UI based on G123 Design System and Atomic Design
yarn add @g123jp/g123-ui-
make sure tailwindcss has been installed correctly.
-
expand details
# in your root css @tailwind base; @tailwind components; @tailwind utilities;
-
make sure postcss has been configured correctly(if you use TailwindCSS as a PostCSS plugin).
-
import g123-ui's config as default(use tailwindcss's presents)
import { g123TailwindPresets } from '@g123jp/g123-ui'; const TailwindConfig = { // use g123-ui's presets as default presets: [g123TailwindPresets], content: [ // ... put your content here './node_modules/@g123jp/g123-ui/dist/components/**/*.js', './node_modules/@g123jp/g123-ui/dist/utils/**/*.js', ], // ... your other configs };
-
import { Button, ButtonType, Logo } from '@g123jp/g123-ui'; const App = () => ( <> <Logo /> <Button type={ButtonType.primay}>Submit</Button> </> );
-
But you can also build sites that support toggling dark mode manually using the ‘class’ strategy.
-
Or use your own customize the dark mode selector, for example, add the following code in your
tailwind.config.jsand control dark mode by addingdata-mode="g123-dark"to your<html>tag:
darkMode: ['class', '[data-mode="g123-dark"]'];-
yarn
-
⛑: Make sure to run build before publishing it.
yarn build
-
🤹🏼 check with storybook
yarn storybook