First, install Jekyll and create a new blank project
gem install jekyll
jekyll new blog --blank
Remove the _sass
folder and the main.scss
file from the assets/css
directory to prepare for Tailwind CSS.
Run the following command to initialize a Node.js project in your Jekyll project folder
npm init
Install Tailwind CSS and create its configuration file
yarn add tailwindcss
npx tailwindcss init # creates tailwindcss config file
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: [
],
}
In the assets/css
directory, create a new file named tailwind.css
and include the following lines:
@tailwind base;
@tailwind components;
@tailwind utilities;
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"
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
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.