Astro

Create project

Run the create astro command to create a new React project.

npm create astro --add react --add tailwindcss

Walk through the prompts and choose the options you want.

Where should we create your new project? › my-app
How would you like to start your new project? › A basic, minimal starter
Install dependencies? › Yes
Initialize a new git repository? › Yes

Create .css file

Create a new file named src/styles/global.css with the following code:

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

Import the global.css file

Import the global.css file in your src/pages/index.astro file:

---
import '@/styles/globals.css'
---

Disable appBaseStyles

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 globals.css file. To do this, set the applyBaseStyles config option for the tailwind plugin in astro.config.mjs to false.

export default defineConfig({
  integrations: [react(), tailwind({ applyBaseStyles: false })] 
});

Update tsconfig.json

Add the baseUrl and paths properties to the compilerOptions section of the tsconfig.json file:

{
  "extends": "astro/tsconfigs/strict",
  "include": [
    ".astro/types.d.ts",
    "**/*"
  ],
  "exclude": [
    "dist"
  ],
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "react",
    "baseUrl": ".",
    "paths": {
      "~/*": ["./src/*"]
    }
  }
}

Run the CLI

Run the @kosori/cli init command to configure the project.

npx @kosori/cli init

That's it!

You can now start adding components or hooks to your project.

npx @kosori/cli add components button

The command will install the Button component to your project. And you can import it in your code.

import { Button } from '~/components/ui/button'; 
 
export const Home = () => {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  )
}
 
export default Home;