Install and use Astro

Astro is the best web framework for building content-driven websites like blogs, marketing sites, and e-commerce sites. Astro is known for pioneering a new front-end architecture that reduces JavaScript overhead and complexity compared to other frameworks. If you need a fast-loading website with good SEO, then Astro is your choice.

The plugins currently used in the project are Tailwind CSS UnoCSS Sass

Installation

Official installation guide https://docs.astro.build/en/install-and-setup/

shell

        # pnpm
pnpm create astro@latest
# npm
npm create astro@latest
# yarn
yarn create astro

Adding Dependencies

bash

        pnpm astro add tailwind
pnpm add unocss
pnpm add sass

package.json

        "dependencies": {
    "@astrojs/check": "^0.9.3",
    "@astrojs/tailwind": "^5.1.0",
    "astro": "^4.15.6",
    "sass": "^1.78.0",
    "tailwindcss": "^3.4.11",
    "typescript": "^5.6.2",
    "unocss": "^0.62.3"
  }

Configuring .astro.config.mjs

.astro.config.mjs

        // @ts-check
import { defineConfig } from 'astro/config';

import tailwind from '@astrojs/tailwind';
import UnoCSS from 'unocss/astro';

// https://astro.build/config
export default defineConfig({
  integrations: [
    tailwind(),
    UnoCSS()
  ]
});

Configuring Tailwind CSS

Tailwind configuration documentation

tailwind.config.mjs

        /** @type {import('tailwindcss').Config} */
export default {
    content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
    theme: {
        extend: {},
    },
    plugins: [],
}

Configuring UnoCSS

UnoCSS configuration documentation

uno.config.ts

        import { defineConfig } from 'unocss'

export default defineConfig({
  // ...UnoCSS options
})

Project Structure

bash

        |—— .astro
|—— public
|—— src
|   |—— components
|   |—— layouts
|   |—— pages
|   |   |—— index.astro
|   |—— env.d.ts
|—— .gitignore
|—— .astro.config.mjs
|—— package.json
|—— pnpm-lock.yaml
|—— README.md
|—— tailwind.config.mjs
|—— uno.config.ts