CaribeSky Tailwind Templates

Caribesky

Tailwind-Powered Multilingual SEO-Ready Astro Template

CaribeSky

Tailwind-Powered Multilingual SEO-Ready Astro Template

πŸ§‘β€πŸš€ Use this template to start your multilanguage site Have fun!

πŸš€ Project Structure

Inside the template, you'll see the following folders and files:

The project has the following structure:

β”œβ”€β”€ public/
β”œβ”€β”€ src/ # This directory contains your Astro components and pages.
β”‚   β”œβ”€β”€ assets/
β”‚   β”œβ”€β”€ components/
β”‚   β”‚   β”œβ”€β”€ LanguagePicker.astro
β”‚   β”‚   β”œβ”€β”€ NavBar.astro
β”‚   β”‚   └── NavLink.astro
β”‚   β”œβ”€β”€ content/
β”‚   β”‚   β”œβ”€β”€ about/
β”‚   β”‚   β”‚   β”œβ”€β”€ en/
β”‚   β”‚   β”‚   └── es/
β”‚   β”‚   └── frontPage/
β”‚   β”‚       β”œβ”€β”€ en/
β”‚   β”‚       └── es/
β”‚   β”‚   β”œβ”€β”€ config.ts
β”‚   β”œβ”€β”€ contentSchemas/
β”‚   β”‚   └── commonSchemas/
|   |           └──headMetaData.js #for the html head
β”‚   β”œβ”€β”€ i18n/
β”‚   β”‚   β”œβ”€β”€ ui.ts
β”‚   β”‚   └── utils.ts
β”‚   β”œβ”€β”€ icons/
β”‚   β”œβ”€β”€ layouts/
β”‚   β”‚   └── Layout.astro
β”‚   β”œβ”€β”€ pageLayouts/
β”‚   β”‚   β”œβ”€β”€ AboutPageLayout.astro
β”‚   β”‚   └── FrontPageLayout.astro
β”‚   └── pages/
β”‚   |    β”œβ”€β”€ about.astro
β”‚   |    β”œβ”€β”€ index.astro
β”‚   |    β”œβ”€β”€ en/
β”‚   |      β”œβ”€β”€ index.astro
β”‚   |      └── about.astro
β”‚   β”œβ”€β”€ env.d.ts
β”œβ”€β”€ tailwind.config.mjs # Tailwind CSS configuration.
└── tsconfig.json # TypeScript compiler options.

With this template you get:

  • Internationalization ready to use.
  • Tailwind hooked with configuration example.
  • Icons and how to use them.
  • Content schema examples to start working.
  • Two pages examples in /EN and Spanish.
  • Components to help with the languages and layouts.
  • etc...

🧞 Commands

All commands are run from the root of the project, from a terminal:

Command Action
npm install Installs dependencies
npm run dev Starts local dev server at localhost:4321
npm run build Build your production site to ./dist/
npm run preview Preview your build locally, before deploying
npm run astro ... Run CLI commands like astro add, astro check
npm run astro -- --help Get help using the Astro CLI

πŸ‘€ Want to learn more?

Feel free to check our documentation or jump into our Discord server.

Top categories

Loading Svelte Themes