Create project
Start by creating a new Remix project using create-remix
:
Run the CLI
Run the nyxb
init command to setup your project:
Configure nyxbui.json
You will be asked a few questions to configure nyxbui.json
:
App structure
Note: This app structure is only a suggestion. You can place the files wherever you want.
- Place the UI components in the
app/components/ui
folder. - Your own components can be placed in the
app/components
folder. - The
app/lib
folder contains all the utility functions. We have autils.ts
where we define theny
helper. - The
app/tailwind.css
file contains the global CSS.
Install Tailwind CSS
Then we create a postcss.config.js
file:
And finally we add the following to our remix.config.js
file:
Add tailwind.css
to your app
In your app/root.tsx
file, import the tailwind.css
file:
That's it
You can now start adding components to your project.
The command above will add the Button
component to your project. You can then import it like this: