Create project
Start by creating a new Astro project:
Configure your Astro project
You will be asked a few questions to configure your project:
Add React to your project
Install React using the Astro CLI:
Answer Yes
to all the question prompted by the CLI when installing React.
Add Tailwind CSS to your project
Install Tailwind CSS using the Astro CLI:
Answer Yes
to all the question prompted by the CLI when installing Tailwind CSS.
Edit tsconfig.json file
Add the following code to the tsconfig.json
file to resolve paths:
Run the CLI
Run the nyxbui
init command to setup your project:
Configure nyxbui.json
You will be asked a few questions to configure nyxbui.json
:
Import the global.css file
Import the global.css
file in the src/pages/index.astro
file:
Update astro tailwind config
To prevent serving the Tailwind base styles twice, we need to tell Astro not to apply the base styles, since we already include them in our own global.css
file. To do this, set the applyBaseStyles
config option for the tailwind plugin in astro.config.mjs
to false
.
Update tailwind.config.mjs
When running npx nyxbui@latest init
, your tailwind config for content will be overwritten. To fix this, change the module.exports
to export default
and the content
section with the code below to your tailwind.config.mjs
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: