Jekyll Starter Tailwind screenshot

Jekyll Starter Tailwind

Author Avatar Theme by Taylorbryant
Updated: 13 Sep 2021
246 Stars

Jekyll starter styled with Tailwind CSS

Categories

Overview:

The Jekyll Starter Tailwind is a starter kit that integrates the Tailwind CSS framework with Jekyll, a static site generator. It provides a barebones Jekyll starter theme and a Gulpfile with various functionalities such as compiling Tailwind CSS, stripping out unused CSS, running Autoprefixer, minifying CSS, compiling Jekyll, and running Browsersync for local development. This combination allows for rapid development of custom user interfaces.

Features:

  • Barebones Jekyll Starter Theme: Provides a minimalist starting point for building Jekyll websites.
  • Gulpfile: Automates tasks like compiling Tailwind CSS, stripping out unused CSS, running Autoprefixer, and minifying CSS.
  • Tailwind CSS Integration: Integrates the Tailwind CSS framework, allowing for rapid development of custom user interfaces.
  • Jekyll Integration: Compiles Jekyll templates, Markdown content, and generates a complete static website ready for deployment.
  • Browsersync: Enables live reloading and synchronized testing across multiple devices during local development.

Installation:

To get started with Jekyll Starter Tailwind, follow these steps:

  1. Ensure that you have the following dependencies installed:

    • Bundler
    • Jekyll
    • Node.js
    • npm
    • Ruby
  2. Run the following command to install the required Ruby gems:

    bundle install
    
  3. Install the npm packages listed in the package-lock.json file using the following command:

    npm ci
    
  4. To compile the site with development settings and run Browsersync for local development, use one of the following commands:

    • For development settings:

      npm run start
      
    • For production settings:

      npm run dev
      
  5. Build your site using the following commands:

    • For development settings:

      npm run build:dev
      
    • For production settings:

      npm run build:production
      
  6. To deploy the site to Netlify, use the provided netlify.toml file. By default, Netlify uses jekyll build as the build command, but the netlify.toml file will override it to use npm run build.

Summary:

Jekyll Starter Tailwind is a convenient starter kit for developers who want to combine the power of Jekyll and the flexibility of Tailwind CSS. With the inclusion of a barebones Jekyll starter theme and a Gulpfile for automated tasks, it simplifies the process of building custom user interfaces. The integration of Browsersync allows for efficient local development, and the provided installation guide ensures a smooth setup process. Overall, Jekyll Starter Tailwind is a valuable resource for creating static websites with a responsive and customizable design.