Skip to content

Commit

Permalink
docs: update astro guide
Browse files Browse the repository at this point in the history
  • Loading branch information
sadeghbarati committed Oct 15, 2023
1 parent 72214c3 commit 49ccc6c
Showing 1 changed file with 8 additions and 8 deletions.
16 changes: 8 additions & 8 deletions apps/www/src/content/docs/installation/astro.md
Original file line number Diff line number Diff line change
Expand Up @@ -93,27 +93,27 @@ You will be asked a few questions to configure `components.json`:

```txt showLineNumbers
Would you like to use TypeScript (recommended)? no / yes
Which framework are you using? Vite
Which framework are you using? Astro
Which style would you like to use? › Default
Which color would you like to use as base color? › Slate
Where is your global CSS file? › src/index.css
Where is your global CSS file? › src/styles/globals.css
Do you want to use CSS variables for colors? › no / yes
Where is your tailwind.config.js located? › tailwind.config.mjs
Where is your tailwind.config located? › tailwind.config.mjs
Configure the import alias for components: › @/components
Configure the import alias for utils: › @/lib/utils
```

### Import the index.css file
### Import the globals.css file

Import the `index.css` file in the `src/index.astro` file:
Import the `globals.css` file in the `src/index.astro` file:

```ts {2} showLineNumbers
import '@/index.css'
import '@/styles/globals.css'
```

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

```ts {3-5} showLineNumbers
export default defineConfig({
Expand Down Expand Up @@ -150,4 +150,4 @@ import { Button } from "@/components/ui/button"
</html>
```

</Steps>
</Steps>

0 comments on commit 49ccc6c

Please sign in to comment.