https://github.com/justalever/tailwind-airbnb

A demo of how to build Airbnb's home page using Tailwind CSS
https://github.com/justalever/tailwind-airbnb

css front-end-development postcss tailwindcss

Last synced: 25 days ago
JSON representation

A demo of how to build Airbnb's home page using Tailwind CSS

• Host: GitHub
• URL: https://github.com/justalever/tailwind-airbnb
• Owner: justalever
• Created: 2019-10-20T20:07:44.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2020-06-05T13:59:59.000Z (over 4 years ago)
• Last Synced: 2024-10-09T13:05:42.280Z (about 1 month ago)
• Topics: css, front-end-development, postcss, tailwindcss
• Language: HTML
• Size: 547 KB
• Stars: 47
• Watchers: 4
• Forks: 11
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• tailwindcss-awesome - justalever/tailwind-airbnb - A demo of how to build Airbnb's home page using Tailwind CSS <br/> (9 stars / 2020-06-05 / 8 commits ) (Running the update / By Popularity)

README

        
![https://i.imgur.com/KEbg2dC.jpg](https://i.imgur.com/KEbg2dC.jpg)

# Airbnb Homepage build with Tailwind CSS

[View the tutorial here](https://web-crunch.com/posts/re-create-airbnbs-home-page-with-tailwind-css)

A simple starter project for playing around with Tailwind in a proper PostCSS environment. I used Airbnb as a source of inspiration to teach how to use the framework.

To get started:

1. Clone the repository:

    ```bash

    git clone https://github.com/justalever/tailwind-airbnb tailwind-airbnb

    cd tailwind-airbnb

    ```

2. Install the dependencies:

    ```bash

    # Using npm

    npm install

    # Using Yarn

    yarn

    ```

3. Start the development server:

    ```bash

    # Using npm

    npm run serve

    # Using Yarn

    yarn run serve

    ```

    Now you should be able to see the project running at localhost:8080.

4. Open `public/index.html` in your editor and start experimenting!

## Building for production

Even though this isn't necessarily a starter kit for a proper project, we've included an example of setting up both [Purgecss](https://www.purgecss.com/) and [cssnano](https://cssnano.co/) to optimize your CSS for production.

To build an optimized version of your CSS, simply run:

```bash

# Using npm

npm run production

# Using Yarn

yarn run production

```

After that's done, check out `./public/build/tailwind.css` to see the optimized output.