### Create New Astro Project with Package Managers Source: https://docs.astro.build/en/guides/styling/#tailwind/en/tutorial/1-setup/2 Use the `create astro` setup wizard to initialize a new Astro site. This command creates a new directory for your project and installs necessary dependencies, offering options for different package managers. ```Shell # create a new project with npm npm create astro@latest ``` ```Shell # create a new project with pnpm pnpm create astro@latest ``` ```Shell # create a new project with yarn yarn create astro ``` -------------------------------- ### Start Astro Development Server Source: https://docs.astro.build/en/guides/styling/#tailwind/en/tutorial/1-setup/2 Run the Astro development server to preview your project files as a live website. This command keeps the server running, providing feedback and allowing real-time updates as you work. ```Shell npm run dev ``` ```Shell pnpm run dev ``` ```Shell yarn run dev ``` -------------------------------- ### Install Astro Adapter via CLI Source: https://docs.astro.build/en/guides/styling/#tailwind/en/guides/deploy Example command to install an Astro adapter for on-demand rendering using the `astro add` CLI command, which also handles configuration updates. ```bash npx astro add netlify ``` -------------------------------- ### Example VS Code Terminal Prompt Source: https://docs.astro.build/en/guides/styling/#tailwind/en/tutorial/1-setup/2 This snippet illustrates the typical appearance of a command prompt within the integrated terminal of VS Code, showing user, machine, and current directory. ```Shell user@machine:~/tutorial$ ``` -------------------------------- ### Create a new Astro project using npm Source: https://docs.astro.build/en/guides/styling/#tailwind/en/getting-started This command initializes a new Astro project using the npm package manager. It's the recommended way to start a new Astro site and will guide you through the setup process. ```shell # create a new project with npm npm create astro@latest ``` -------------------------------- ### Create Astro Project from Template or Example Source: https://docs.astro.build/en/guides/styling/#tailwind/en/install-and-setup Use this command to initialize a new Astro project based on an official example or a GitHub repository's `main` branch. Provide the example name or the GitHub username/repository with the `--template` argument. A specific branch can also be specified. ```npm npm create astro@latest -- --template npm create astro@latest -- --template / ``` ```pnpm pnpm create astro@latest --template pnpm create astro@latest --template / ``` ```Yarn yarn create astro --template yarn create astro --template / ``` -------------------------------- ### Complete Astro Home Page Example Source: https://docs.astro.build/en/guides/styling/#tailwind/en/tutorial/3-components/2 This snippet provides a full example of an `index.astro` file, demonstrating the integration of `Navigation`, `Footer`, and global CSS imports, along with a basic HTML structure. ```Astro --- import Navigation from '../components/Navigation.astro'; import Footer from '../components/Footer.astro'; import '../styles/global.css'; const pageTitle = 'Home Page'; --- {pageTitle}

{pageTitle}