Once i've setup the project using the basic what's the exact command to add tailwind to a project and where do I type it exactly ?
#Installing tailwind
timid pagoda
gilded craterBOT
Hi @timid pagoda. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
To add Tailwind to your Astro project, you can use the astro add command in your terminal. Depending on your package manager, the command will vary:
- For npm, use:
npx astro add tailwind - For pnpm, use:
pnpm astro add tailwind - For Yarn, use:
yarn astro add tailwind
You should run these commands in the root directory of your Astro project, where your package.json file is located.
After running the command, if you've followed the Quick Install instructions and said yes to each prompt, you'll see a tailwind.config.mjs file in your project’s root directory. You can use this file to customize your Tailwind configuration.
If the tailwind.config.mjs file isn't there, you can add your own tailwind.config.(js|cjs|mjs|ts|mts|cts) file to the root directory and the integration will use its configurations. This can be useful if you already have Tailwind configured in another project and want to bring those settings over to this one.
Sources:
- Astro Tailwind Integration Guide (https://docs.astro.build/en/guides/integrations-guide/tailwind/)
- Astro Styling Guide (https://docs.astro.build/en/guides/styling#css-integrations)
- Starlight Guide for Adding Tailwind to an Existing Project (https://starlight.astro.build/guides/css-and-tailwind#add-tailwind-to-an-existing-project)