Welcome to my Astro 4 + Svelte Starter Kit! This project integrates the power of Astro 4 with TailwindCSS + Prettier Sorting for both Astro files and Svelte. This is a minimal setup out of the box mainly to address the issues with Prettier sorting tailwind classes in both Astro + Svelte files.
This includes sorting tailwind classes inside of style tags in both Astro and Svelte components as well. eg:
<style lang="postcss">
h1 {
@apply sm:text-xl md:text-2xl;
}
</style>
- 🚀 Astro 4: A modern, performance-focused web framework.
- 💅 TailwindCSS: A utility-first CSS framework for rapidly building custom designs. Includes Prettier sorting for clean and organized CSS.
- 🌟 Svelte: A radical new approach to building user interfaces.
- 🧹 Prettier Integration: Configured for TailwindCSS sorting. Please add your own additional prettier config as I don't include one here.
- 🛠️ Custom Aliases: Simplify imports with aliases like
@components/
,@layouts/
, and@assets/
.
- Svelte integration for building reactive components.
- TailwindCSS for rapid and responsive styling, enhanced with Prettier sorting in Astro and Svelte files.
- PostCSS
@apply
directive working seamlessly in both Astro and Svelte as shown in the example file. - Custom aliases for a more efficient development workflow:
~/*
for the source directory.@components/*
for Svelte components.@layouts/*
for layout components.@assets/*
for static assets.
To get started with this starter pack, follow these steps:
# Clone the Repository
git clone https://github.com/KyTiXo/astro-4-tailwind-svelte.git
# Install Dependencies
cd astro-4-tailwind-svelte
pnpm install
# Start Developing
pnpm run dev