Tailpages (Tailwind + Github Pages) is a Jekyll website template based on TailwindCSS, which can be hosted by Github for free. You can visit the demo site at https://harrywang.me/.
Key features are:
- Minimalist design inspired by the indigo template
- Elegant typography via TailwindCSS Typography plugin and Inter font
- Markdown support for content authoring (static pages and blogs)
- Code highlighting and styling via highlight.js (see code example)
- Latex support via MathJax (see an example)
- Table of Contents support via jekyll-toc (see an example)
- No-code Tutorial: this tutorial shows how you can use Tailpages template to quickly setup your website and blogs without coding, which you can access at medium or blog.
- Technical Tutorial: this tutorial shows how to setup the development environment for Tailpages from scratch, which you can access at medium or blog.
Posts name format: yyyy-mm-dd-title.md
docker run -v $(pwd):/srv/jekyll -p 4000:4000 -it jekyll/jekyll jekyll build --watch
To enable typography plugin, inter font, and customizations by updating tailwid.config.js
as follows:
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
content: [
'./**/*.html'
],
darkMode: 'media',
theme: {
extend: {
typography: {
DEFAULT: {
css: {
pre: {
padding: "0",
color: "#1F2933",
backgroundColor: "#F3F3F3"
},
code: {
padding: "0.2em 0.4em",
backgroundColor: "#F3F3F3",
color: "#DD1144",
fontWeight: "400",
"border-radius": "0.25rem"
},
"code::before": false,
"code::after": false,
"blockquote p:first-of-type::before": false,
"blockquote p:last-of-type::after": false,
},
},
},
fontFamily: {
sans: ['Inter var', ...defaultTheme.fontFamily.sans],
},
},
},
variants: {
extend: {},
},
plugins: [
require('@tailwindcss/typography'),
],
}