How to Set Up Tailwind CSS in Jekyll

1. Start a New Jekyll Project

First, install Jekyll and create a new blank project

gem install jekyll

jekyll new blog --blank

2. Clean Up Default Files

Remove the _sass folder and the main.scss file from the assets/css directory to prepare for Tailwind CSS.

3. Initialize a Node.js Project

Run the following command to initialize a Node.js project in your Jekyll project folder

npm init

4. Add Tailwind CSS to the Project

Install Tailwind CSS and create its configuration file

yarn add tailwindcss

npx tailwindcss init # creates tailwindcss config file

5. Configure Tailwind Paths

In the generated tailwind.config.js file, specify the paths to your Jekyll project’s files where Tailwind classes will be used. Here’s an example configuration

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./_site/**/*.html", // Jekyll output files
    "./_includes/**/*.html",
    "./_layouts/**/*.html",
    "./*.md",
    "./**/.html"
  ],
  theme: {
    extend: {},
  },
  plugins: [
  ],
}

6. Create a Tailwind CSS File

In the assets/css directory, create a new file named tailwind.css and include the following lines:

@tailwind base;
@tailwind components;
@tailwind utilities;

7. Add a Build Script

Open your package.json file and add the following script under the scripts section to compile and minify Tailwind CSS

"build:css": "npx tailwindcss -i ./assets/css/tailwind.css -o ./assets/css/main.css --watch --minify"

8. Start the Development Server with Tailwind CSS Build Script

Open two terminal windows and run each command in a separate terminal.

# Start the Jekyll Server in Watch Mode
jekyll serve --watch

# compiles the tailwind.css file into main.css and watches for changes
npm run build:css

9. (Optional) Setup Tailwind CSS Typography plugin

Tailwind Typography plugin is useful if you plan to write your posts in Markdown format.

# Install the tailwind typography plugin
yarn add @tailwindcss/typography

// Then add the plugin to your tailwind.config.js file:

module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/typography'),
    // ...
  ],
}

Add the following HTML content inside the layout you are using for posts.

<div class="prose">
   {{ content }} 
</div>

For more details on typography, Tailwind Typography repository.