All Projects → justalever → tailwind-airbnb

justalever / tailwind-airbnb

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

Programming Languages

HTML
75241 projects
javascript
184084 projects - #8 most used programming language
CSS
56736 projects

Projects that are alternatives of or similar to tailwind-airbnb

tailwind-caret-color
Tailwindcss plugin to color caret in input fields
Stars: ✭ 12 (-69.23%)
Mutual labels:  postcss, tailwindcss
vite-ts-tailwind-starter
Opinionated Vite + Vue 3 + TypeScript + Tailwind CSS starter template w/ tests and CI.
Stars: ✭ 228 (+484.62%)
Mutual labels:  postcss, tailwindcss
postcss-typed-css-classes
PostCSS plugin that generates typed entities from CSS classes for chosen programming language.
Stars: ✭ 12 (-69.23%)
Mutual labels:  postcss, tailwindcss
Sapper Firebase Typescript Graphql Tailwindcss Actions Template
A template that includes Sapper for Svelte, Firebase functions and hosting, TypeScript and TypeGraphQL, Tailwind CSS, ESLint, and automatic building and deployment with GitHub Actions
Stars: ✭ 111 (+184.62%)
Mutual labels:  postcss, tailwindcss
eleventy solo starter njk
Further development suspended as of 2021-09-11. Please refer instead to https://www.11ty.dev/docs/starter/ for a wide selection of other Eleventy starter sets.
Stars: ✭ 22 (-43.59%)
Mutual labels:  postcss, tailwindcss
Fast
Develop, build, deploy, redeploy, and teardown frontend projects fast.
Stars: ✭ 126 (+223.08%)
Mutual labels:  postcss, front-end-development
tailwindcss-postcss-browsersync-boilerplate
Tailwind CSS + PostCSS + BrowserSync boilerplate
Stars: ✭ 28 (-28.21%)
Mutual labels:  postcss, tailwindcss
Awesome Tailwindcss
😎 Awesome things related to Tailwind CSS
Stars: ✭ 7,791 (+19876.92%)
Mutual labels:  postcss, tailwindcss
hugo-starter-tailwind-basic
A basic and simple to set up Hugo with TailwindCSS starter project.
Stars: ✭ 80 (+105.13%)
Mutual labels:  postcss, tailwindcss
building-realworld-user-interfaces-using-tailwind
Demo of building real-world UIs using TailwindCSS
Stars: ✭ 87 (+123.08%)
Mutual labels:  postcss, tailwindcss
Tailwindcss
A utility-first CSS framework for rapid UI development.
Stars: ✭ 50,879 (+130358.97%)
Mutual labels:  postcss, tailwindcss
XT-TailwindCSS-Starter
A Tailwind CSS Starter. Based on Tailwind CSS, Webpack, PostCSS, and cssnano. Fully optimized for top performance.
Stars: ✭ 19 (-51.28%)
Mutual labels:  postcss, tailwindcss
Postcss Elm Tailwind
put some tailwind in your elm
Stars: ✭ 80 (+105.13%)
Mutual labels:  postcss, tailwindcss
A17t
An atomic design toolkit for pragmatists
Stars: ✭ 236 (+505.13%)
Mutual labels:  postcss, tailwindcss
Sapper Template Firebase
Starter Rollup template for Sapper apps with Firebase functions based on https://github.com/nhristov/sapper-template-rollup.
Stars: ✭ 29 (-25.64%)
Mutual labels:  postcss, tailwindcss
stencil-tailwind-plugin
Plugin for using tailwindcss with StencilJS
Stars: ✭ 17 (-56.41%)
Mutual labels:  postcss, tailwindcss
Shopify Theme Lab
Shopify theme development environment using Liquid, Vue and Tailwind CSS 🧪
Stars: ✭ 250 (+541.03%)
Mutual labels:  postcss, tailwindcss
Tailwindcss Dark Mode
🌚 A Tailwind CSS plugin that adds variants for dark mode
Stars: ✭ 649 (+1564.1%)
Mutual labels:  postcss, tailwindcss
tailwind-bootstrap-grid
Tailwind CSS plugin that generates Bootstrap's flexbox grid
Stars: ✭ 96 (+146.15%)
Mutual labels:  postcss, tailwindcss
sapper-postcss-template
A template that includes Sapper for Svelte and PostCSS preprocessing with Tailwind CSS
Stars: ✭ 84 (+115.38%)
Mutual labels:  postcss, tailwindcss

https://i.imgur.com/KEbg2dC.jpg

Airbnb Homepage build with Tailwind CSS

View the tutorial here

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:

    git clone https://github.com/justalever/tailwind-airbnb tailwind-airbnb
    
    cd tailwind-airbnb
  2. Install the dependencies:

    # Using npm
    npm install
    
    # Using Yarn
    yarn
  3. Start the development server:

    # 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 and cssnano to optimize your CSS for production.

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

# 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.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].