This tutorial explains about how to add tailwind CSS framework to astro project.
Create a Astro project
First, Create a astro project using npm create astro@latest
command
E:\myblogs>npm create astro@latest
astro v2.8.4 Launch sequence initiated.
dir Where should we create your new project?
./myapp
tmpl How would you like to start your new project?
Empty
✔ Template copied
deps Install dependencies?
Yes
██████ Installing dependencies with npm...
▲ error Request timed out after one minute
✔ Dependencies installed
ts Do you plan to write TypeScript?
Yes
use How strict should TypeScript be?
Strictest
✔ TypeScript customized
git Initialize a new git repository?
Yes
✔ Git initialized
next Liftoff confirmed. Explore your project!
Enter your project directory using cd ./w3logs
Run npm run dev to start the dev server. CTRL+C to stop.
Add frameworks like react or tailwind using astro add.
Stuck? Join us at https://astro.build/chat
Astro project created with prototype files and directoriies, installed dependencies
add tailwind to astro project
astro provides tailwind framework as integration which you can add it easily
Run below command
astro add tailwind
Here is an output
E:\myblogs\w3logs>astro add tailwind
√ Resolving packages...
Astro will run the following command:
If you skip this step, you can always run it yourself later
╭─────────────────────────────────────────────────────────────────╮
│ npm install @astrojs/tailwind astro@^2.6.5 tailwindcss@^3.0.24 │
╰─────────────────────────────────────────────────────────────────╯
√ Continue? ... yes
√ Installing dependencies...
Astro will generate a minimal ./tailwind.config.cjs file.
√ Continue? ... yes
Astro will make the following changes to your config file:
╭ astro.config.mjs ─────────────────────────────╮
│ import { defineConfig } from 'astro/config'; │
│ │
│ import tailwind from "@astrojs/tailwind"; │
│ │
│ // https://astro.build/config │
│ export default defineConfig({ │
│ integrations: [tailwind()] │
│ }); │
╰───────────────────────────────────────────────╯
√ Continue? ... yes
success Added the following integration to your project:
- @astrojs/tailwind
It adds following dependencies to package.json
- @astrojs/tailwind
- tailwindcss@^3.0.24
updates astro.config.js
by adding tailwind
object entry to integrations
import { defineConfig } from 'astro/config';
import tailwind from "@astrojs/tailwind";
// https://astro.build/config
export default defineConfig({
integrations: [tailwind()]
});