Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jerriclynsjohn/jekyll-tailwind
Jekyll + TailwindCSS Starter Template
https://github.com/jerriclynsjohn/jekyll-tailwind
jekyll postcss purgecss static-site-generator tailwindcss
Last synced: 15 days ago
JSON representation
Jekyll + TailwindCSS Starter Template
- Host: GitHub
- URL: https://github.com/jerriclynsjohn/jekyll-tailwind
- Owner: jerriclynsjohn
- Created: 2020-03-06T20:50:20.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2020-03-06T22:25:55.000Z (almost 5 years ago)
- Last Synced: 2024-12-16T22:11:40.819Z (20 days ago)
- Topics: jekyll, postcss, purgecss, static-site-generator, tailwindcss
- Language: HTML
- Homepage: https://jekyll-tailwind.netlify.com/
- Size: 9.77 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Jekyll Tailwind Starter
Welcome! Here you'll find a reasonable starter pack for using [Jekyll](https://jekyllrb.com) with [Tailwind CSS](https://tailwindcss.com), [Autoprefixer](https://github.com/postcss/autoprefixer), and [Purgecss](https://github.com/FullHuman/purgecss).
## About
This project uses [jekyll-postcss](https://github.com/mhanberg/jekyll-postcss) to manage compiling your Tailwind and Autoprefixer styles. You can use any [PostCSS](https://postcss.org) plugin by installing it with `yarn` or `npm` and adding it to your `postcss.config.js`.
[jekyll-purgecss](https://github.com/mhanberg/jekyll-purgecss) is used to integrate Purgecss (only in production).
## Install
```bash
git clone [email protected]:mhanberg/jekyll-tailwind-starter PROJECT_NAME
cd PROJECT_NAME
# Install your Ruby and JavaScript dependencies.
# Initialize your Tailwind configuration.
# Reinitialize your git repository.
bin/setup
```
## Usage
```bash
# Install new dependencies
bin/bootstrap
# Start the server
bin/start
# Create a new post
bin/new POST_TITLE
```
## File Structure
```
+---_includes
\---analytics.html // place your analytics tracking snippet in here
\---syntax.css // Syntax highlighting CSS
\---tailwind.config.js // Tailwind configuration. This is generated by bin/setup
+---_layouts
\---default.html
\---page.html
\---post.html
+---_posts
+---_bin
\---bootstrap // Install dependencies
\---new // Create a new post and open it in your $EDITOR
\---setup // Initial site setup
\---start // Start the server with the livereload, incremental, drafts, and future flags on port 5000
+---_css
\---site.css // Entry point stylesheet. You can write your styles here or import them from the _includes directory
+---index.md // Front page. This can be changed to an HTML file if desired.
+---404.html
+---_config.yml // Jekyll configuration
+---postcss.config.js // PostCSS configuration. All plugins should be registered here.
+---purgecss.config.js // Purgecss configuration
+---netlify.toml // Netlify configuration
```
## PostCSS plugins
- Tailwind CSS
- Autoprefixer
- postcss-import
## Deployment
This setup has been tested on [Netlify](https://www.netlify.com). The JEKYLL_ENV environment variable must be set to production in order for PurgeCSS to execute. The included netlify.toml file will configure this on Netlify deploys