Creating a modern, stylish website with Jekyll is easier than ever with Tailwind CSS. This utility-first CSS framework allows developers to craft beautiful designs quickly and efficiently. In this article, we'll explore how to integrate Tailwind CSS into your Jekyll site and customize it for a sleek, contemporary look.

Why Use Tailwind CSS with Jekyll?

Tailwind CSS offers a flexible approach to styling by providing a comprehensive set of utility classes. When combined with Jekyll's static site generator, it enables rapid development of responsive and modern websites. Benefits include:

  • Customizable design without writing custom CSS
  • Responsive, mobile-first layouts
  • Fast performance due to minimal CSS files
  • Ease of maintenance and scalability

Integrating Tailwind CSS into Jekyll

Follow these steps to add Tailwind CSS to your Jekyll project:

  • Install Node.js and npm if you haven't already.
  • Create a new Jekyll site or open your existing project.
  • Initialize npm in your project directory:
  • Run npm init -y to create a package.json file.
  • Install Tailwind CSS via npm:
  • Run npm install -D tailwindcss.
  • Generate the Tailwind configuration file:
  • Run npx tailwindcss init.
  • Create a CSS file (e.g., assets/css/tailwind.css) and include the following:

@tailwind base;

@tailwind components;

@tailwind utilities;

Configure your tailwind.config.js as needed to customize your design.

Building and Linking the CSS

Build your Tailwind CSS file using the command:

npx tailwindcss build assets/css/tailwind.css -o assets/css/main.css

Link the generated CSS file in your Jekyll layout, typically in _layouts/default.html:

<link rel="stylesheet" href="{{ '/assets/css/main.css' | relative_url }}">

Customizing Your Design

Use Tailwind's utility classes directly in your HTML to style elements. For example:

<header class="bg-gray-800 text-white p-4">Your Site Title</header>

Adjust colors, spacing, fonts, and more using Tailwind's extensive class list. You can also extend Tailwind's configuration to add custom themes or breakpoints.

Conclusion

Integrating Tailwind CSS with Jekyll empowers you to create modern, responsive websites with minimal effort. By leveraging utility classes and customizing your configuration, you can achieve a unique and professional look for your site. Start experimenting today and elevate your static site design!