Jekyll Tailwind Starter
Welcome! Here you'll find a reasonable starter pack for using Jekyll with Tailwind CSS, Autoprefixer, and Purgecss.
About
This project uses jekyll-postcss to manage compiling your Tailwind and Autoprefixer styles. You can use any PostCSS plugin by installing it with yarn or npm and adding it to your postcss.config.js.
Install
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/setupUsage
# Install new dependencies
bin/bootstrap
# Start the server
bin/start
# Create a new post
bin/new POST_TITLEFile 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.