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/setup
Usage
# 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.
Reload CSS Imports?
Right now when editing some CSS from an include, eg in
_includes/syntax.css
the change is not reflected unless server is restarted. Any way to make that work?Reason for asking: trying to set up Build-time imports.
Netlify problems?
Thanks for setting up this starter app!
I've just forked this repository & tried deploying it to Netlify, and it looks like the Liquid templates aren't getting parsed: https://sleepy-boyd-3e01d0.netlify.com/
(That's without making any changes to your code other than generating the tailwind config file & checking it in.)
Any guesses what I might have screwed up? ;-) Do I need to change any settings at Netlify, perhaps?
Thanks for your help
Error while updating tailwindcss from v1.2 to 1.7
Hi. I can't use latest version of tailwindcss. When I do
npm update
runbin/start
I get following error. I think error is with the postcss plugin of jekyll.You created jekyll-postcss and can you make it working with the latest release?
Bump cssnano from 4.1.11 to 5.0.7
Bumps cssnano from 4.1.11 to 5.0.7.
Release notes
Sourced from cssnano's releases.
... (truncated)
Commits
2c246ec
Publish cssnano 5.0.7b1e9581
chore(postcss-reduce-initial): fix build command (#1170)ca5246d
refactor(postcss-reduce-initial): refactor and add tests for acquire script (...506a823
Improve config documentation and remove 22 dependencies from cssnano (#1168)9886775
chore(git): clean up .gitignore files (#1156)095f901
test: fix misc. test warnings (#1161)629918c
chore(docs): update to latest docusaurus (#1155)3ebc3d9
fix(site-playground): add missing error handling to fix WSOD (#991) (#1154)ef098b1
chore(deps): bump postcss-svgo dep of svgo from v2.3.0 to 2.3.1 (#1152)2a0128c
chore(docs): update docusaurus (#1151)Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and language@dependabot badge me
will comment on this PR with code to add a "Dependabot enabled" badge to your readmeAdditionally, you can set the following in your Dependabot dashboard:
Bump autoprefixer from 9.8.6 to 10.3.1
Bumps autoprefixer from 9.8.6 to 10.3.1.
Release notes
Sourced from autoprefixer's releases.
... (truncated)
Changelog
Sourced from autoprefixer's changelog.
... (truncated)
Commits
efca4fa
Release 10.3.1 version1febed0
Update dependencies4e31573
Fix: Term element in content value gets parsed (#1414)006146d
Release 10.3 version5f9a9b5
Clean up dependencies9a114c5
Update dependencies5468c9f
Autoprefix the file-selector-button pseudo-element (#1412)05cfed6
Fix: remove broken link with 404 error (#1410)d4ced64
Release 10.2.6 versionc1b26d1
Better warning textDependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and language@dependabot badge me
will comment on this PR with code to add a "Dependabot enabled" badge to your readmeAdditionally, you can set the following in your Dependabot dashboard:
Bump autoprefixer from 9.8.6 to 10.3.0
Bumps autoprefixer from 9.8.6 to 10.3.0.
Release notes
Sourced from autoprefixer's releases.
... (truncated)
Changelog
Sourced from autoprefixer's changelog.
... (truncated)
Commits
006146d
Release 10.3 version5f9a9b5
Clean up dependencies9a114c5
Update dependencies5468c9f
Autoprefix the file-selector-button pseudo-element (#1412)05cfed6
Fix: remove broken link with 404 error (#1410)d4ced64
Release 10.2.6 versionc1b26d1
Better warning text8d492b3
Update Jest5daaa3f
Use Node.js 16 on CI397d796
Clarify warning about no targets (#1409)Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and language@dependabot badge me
will comment on this PR with code to add a "Dependabot enabled" badge to your readmeAdditionally, you can set the following in your Dependabot dashboard:
Bump cssnano from 4.1.11 to 5.0.6
Bumps cssnano from 4.1.11 to 5.0.6.
Release notes
Sourced from cssnano's releases.
Commits
eb6bc89
Publish cssnano 5.0.614c76d5
chore(dev): remove obsolete build scripts (#1145)9acd6a2
fix(postcss-ordered-values): preserve columns count (#1144)f23108e
chore(dev): replace del-cli with rimraf (#1143)b60f54b
chore(postcss-normalize-url): bump normalize-url dependency to 6.0.1 (#1142)36cef92
chore: use workspaces (#1140)a63dabf
docs: Replace Azure Pieplines badge with Github Actions (#1139)95d599f
docs: Update website for 5.0.5 (#1138)9b3c54f
Merge pull request #1137 from cssnano/v5.056b73174
Publish cssnano 5.0.5Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and language@dependabot badge me
will comment on this PR with code to add a "Dependabot enabled" badge to your readmeAdditionally, you can set the following in your Dependabot dashboard:
Bump cssnano from 4.1.11 to 5.0.5
Bumps cssnano from 4.1.11 to 5.0.5.
Release notes
Sourced from cssnano's releases.
Commits
ddae8d3
v5.0.50a4993e
v5.0.23168399
feat(postcss-colormin): Output 4 and 8 digit hex colors (#1109)f2a8a1a
chore: update all deps (#1135)0ff1716
fix(postcss-svgo): only process inline SVG URLs (#1133)069c424
fix(postcss-merge-rules): check all intersections when merging rules (#1116)dceafe2
Merge pull request #1124 from cssnano/v5.0.408ec284
docs: update website for cssnano 5.0.4.a7c2f9b
Publish cssnano 5.0.432771da
fix(postcss-colormin): Strict color parsing (#1122)Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and language@dependabot badge me
will comment on this PR with code to add a "Dependabot enabled" badge to your readmeAdditionally, you can set the following in your Dependabot dashboard:
Bump autoprefixer from 9.8.6 to 10.2.6
Bumps autoprefixer from 9.8.6 to 10.2.6.
Release notes
Sourced from autoprefixer's releases.
... (truncated)
Changelog
Sourced from autoprefixer's changelog.
Commits
d4ced64
Release 10.2.6 versionc1b26d1
Better warning text8d492b3
Update Jest5daaa3f
Use Node.js 16 on CI397d796
Clarify warning about no targets (#1409)9836cfa
Update dependencies8889215
Fix Node.js 10 on CIe72998a
Update dependencies60ae9a6
Update lock files190569b
update postcss to patched version (#1408)Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and language@dependabot badge me
will comment on this PR with code to add a "Dependabot enabled" badge to your readmeAdditionally, you can set the following in your Dependabot dashboard:
Bump cssnano from 4.1.11 to 5.0.4
Bumps cssnano from 4.1.11 to 5.0.4.
Release notes
Sourced from cssnano's releases.
Commits
a7c2f9b
Publish cssnano 5.0.432771da
fix(postcss-colormin): Strict color parsing (#1122)8a31ca3
fix(postcss-colormin): ERR_PACKAGE_PATH_NOT_EXPORTED (#1111)28c2471
Merge pull request #1108 from cssnano/v5.0.37613ee4
docs: update website for new release3b1cb9d
Publish8518890
chore: update ignore in lerna.jsona7f0be4
feat(postcss-colormin): switch to colord and solve multiple issues (#1107)ea1ff0b
chore: update css-declaration-sorter to v6.0.3 (#1071)02e3aab
chore(site): update all website dependencies (#1101)Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and language@dependabot badge me
will comment on this PR with code to add a "Dependabot enabled" badge to your readmeAdditionally, you can set the following in your Dependabot dashboard:
Bump cssnano from 4.1.11 to 5.0.3
Bumps cssnano from 4.1.11 to 5.0.3.
Release notes
Sourced from cssnano's releases.
Commits
4e072b7
Publishb001bf8
chore: update ignore in lerna.jsona7f0be4
feat(postcss-colormin): switch to colord and solve multiple issues (#1107)ea1ff0b
chore: update css-declaration-sorter to v6.0.3 (#1071)02e3aab
chore(site): update all website dependencies (#1101)65d8197
chore(postcss-zindex): refactor to drop depenencies (#1096)4d7fe36
fix(postcss-merge-rules): add some missing known pseudo classes. (#1099)c5e0a5e
fix(postcss-merge-rules): prevent breaking rule merges (#1072)15235a9
chore: update postcss and postcss-selector-parser (#1097)1aa8f5d
chore: fix the code to generate the integration test fixtures (#1070)Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and language@dependabot badge me
will comment on this PR with code to add a "Dependabot enabled" badge to your readmeAdditionally, you can set the following in your Dependabot dashboard:
Use builtin Tailwind purging
Tailwind now can purge itself. The template should be updated to reflect this.
Since the template doesn't hard code the tailwind config, there should be a copy/paste-able purge config in the readme.