Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mhanberg/jekyll-tailwind-starter
Starter project for using Jekyll with Tailwind CSS
https://github.com/mhanberg/jekyll-tailwind-starter
Last synced: 3 months ago
JSON representation
Starter project for using Jekyll with Tailwind CSS
- Host: GitHub
- URL: https://github.com/mhanberg/jekyll-tailwind-starter
- Owner: mhanberg
- Created: 2018-11-26T05:12:17.000Z (about 6 years ago)
- Default Branch: main
- Last Pushed: 2021-11-22T15:04:10.000Z (about 3 years ago)
- Last Synced: 2024-10-13T09:57:31.547Z (3 months ago)
- Language: CSS
- Homepage:
- Size: 26.4 KB
- Stars: 113
- Watchers: 7
- Forks: 19
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-tailwindcss - Jekyll Starter - Jekyll starter using Tailwind CSS. (Starters & Themes)
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`.
## 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.
+---netlify.toml // Netlify configuration
```
## PostCSS plugins
- postcss-import
- Tailwind CSS
- Autoprefixer
- @fullhuman/postcss-purgecss
- cssnano
## Deployment
This setup has been tested on [Netlify](https://www.netlify.com).