/astro-tailwindcss

Project Template: 🔥 Astro + ✨ Tailwind CSS

Primary LanguageJavaScriptMIT LicenseMIT

Project Template: Astro + Tailwind CSS


License

Welcome to the Astro + Tailwind CSS Project Template repository! This template provides you with a solid foundation to kickstart your web development projects with modern tools and best practices. It's pre-configured with ESLint, Prettier, Husky, and Autoprefixer for a seamless development experience.

Features

  • Astro: Astro is an all-in-one web framework for building fast, content-focused websites.
  • Tailwind CSS: A utility-first CSS framework for rapidly building custom designs.
  • ESLint: Linting utility to enforce code quality and consistency.
  • Prettier: Opinionated code formatter to keep your codebase neat and consistent.
  • Husky: Git hooks made easy, ensuring code quality before committing.
  • Autoprefixer: Automatically adds vendor prefixes to your CSS rules for better browser compatibility.

Getting Started

Follow these steps to get your project up and running:

  1. Clone the Repository: Begin by cloning this repository to your local machine using git clone https://github.com/richterich/astro-tailwindcss.git.

  2. Navigate to the Project Directory: Move into the project directory with cd astro-tailwindcss.

  3. Install Dependencies: Run npm install or yarn install to install all the necessary dependencies.

  4. Development Mode: Start the development server by running npm run dev or yarn dev. This will launch the application and provide you with a local development URL.

  5. Build for Production: When you're ready to deploy your application, use npm run build or yarn build to generate optimized and minified assets.

Project Structure

/
├── .husky/                # Husky dir
│   └── pre-commit         # Pre-commit hooks
├── public/                # Public assets
│   ├── logo.svg           # Astro logo
|   └── favicon.svg        # Favicon
├── src/                   # Source code
│   ├── layouts/           # Layouts of a website
│   ├── pages/             # Pages of a website
│   ├── shared/            # Shared components
│   └── main.css           # Main/Global styles
├── .eslintignore          # ESLint ignore configuration
├── .gitignore             # Git ignore configuration
├── .lintstagedrc          # Lint Stage configuration
├── .prettierignore        # Prettier ignore configuration
├── .eslintrc.cjs          # ESLint configuration
├── prettier.config.js     # Prettier configuration
├── postcss.config.js      # PostCSS configuration
├── tailwind.config.js     # Tailwind CSS configuration
├── package.json           # Package configuration
├── LICENSE                # License file
└── README.md              # Project documentation (you're here!)

Contributing

You are welcome to contribute to this project! To contribute, follow these steps:

  1. Fork the repository.
  2. Create a new branch for your feature or bug fix.
  3. Make your changes and commit them.
  4. Push your changes to your fork.
  5. Submit a pull request with a detailed description of your changes.

License

This project is licensed under the MIT License - see the LICENSE file for details.


Happy coding! If you have any questions or need further assistance, don't hesitate to reach out.

richterich's Github Profile richterich's X (Twitter)