Skip to content
A landing page inspired by a free template from Wix.com rebuilt with Tailwind CSS.
HTML JavaScript CSS
Branch: master
Clone or download
Latest commit 9128b6c Jul 2, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
public Final bits Jun 30, 2019
.gitignore Update .gitignore Jul 1, 2019
README.md Update README.md Jul 1, 2019
package.json Init Jun 30, 2019
postcss.config.js Init Jun 30, 2019
tailwind.config.js Final bits Jun 30, 2019

README.md

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

Let's Build: With Tailwind CSS - Movie Production Landing Page

This project is the final result of creating a movie production landing page replica of a popular theme on Wix.com. It's merely an experiment to showcase what's possible with Tailwind CSS. You can watch me code it from scratch here:

https://web-crunch.com/tailwind-css-movie-production-landing-page

To get started:

  1. Clone the repository:

    git clone https://github.com/justalever/tailwind-production-landing-page
    
    cd tailwind-production-lading-page
  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.

You can’t perform that action at this time.