README.md in jekyll-tailwind-1.0.0 vs README.md in jekyll-tailwind-2.0
- old
+ new
@@ -4,36 +4,64 @@
## Set up
To add this gem to your project you must include it in your Gemfile:
+1. Add a gem
```ruby
group :jekyll_plugins do
gem 'jekyll-tailwind'
end
```
+2. Add **tailwind.config.js** to root directory with following contents
+```js
+module.exports = {
+ content: ["./**/*.html"],
+ theme: {
+ extend: {},
+ },
+ plugins: [
+ require('@tailwindcss/typography'),
+ require('@tailwindcss/forms'),
+ require('@tailwindcss/container-queries')
+ ],
+};
+```
+
+3. Modify default template to include app.css, e.g.:
+`<link rel="stylesheet" href="{{ "/assets/css/app.css" | relative_url }}">`
+
**The first time you build your Jekyll site, this gem will automatically download the Tailwind CLI for your platform and use it to build your CSS.** The Tailwind CLI will be saved in `_tailwind/tailwind-VERSION-PLATFORM`. It is recommended that you add this file to your `.gitignore` and don't commit it to your repository.
It is important to note that **subsequent runs will use the existing Tailwind CLI and won't download it again.**
-## Customize the Tailwind version
+## Adjust tailwind configuration
-Although not strictly necessary, it is recommended to pin your desired Tailwind CLI version in `_config.yml`.
+By default Tailwind will:
+- read the `tailwind.config.js` file that lives in your project's root (more info at [the Tailwind docs](https://tailwindcss.com/docs/configuration)).
+- Output file will also be written into `_site/assets/css/app.css`.
+- Process postcss if `postcss.config.js` is present in the root directory.
+But it's possible to tweak these settings through `_config.yml` file:
+
```yml
tailwind:
- version: 3.4.1
+ config: config/tailwind.config.js
+ input: assets/css/app.css # or [assets/css/app.css, assets/css/web.css]
+ output: _site/assets/css/web.css
+ postcss: config/postcss.config.js # default is nil
+ minify: true # defaults to false
```
-If you don't do this, the gem will automatically download the latest Tailwind CLI version that was available when gem was published.
+## Picking Tailwind version
+It's possible to pick particular version of tailwindd by locking `tailwindcss-ruby` dependency to certain version. Add following to your Gemfile:
-## Read the Tailwind configuration from an alternative path
+`gem 'tailwindcss-ruby', '>=3', '<4'`
-By default Tailwind will read the `tailwind.config.js` file that lives in your project's root (more info at [the Tailwind docs](https://tailwindcss.com/docs/configuration)).
+or if you're looking for a 4v:
-If your configuration file lives elsewhere you can say so in the `_config.yml` file:
+`gem 'tailwindcss-ruby', '>=4'`
-```yml
-tailwind:
- config_path: assets/tailwind.config.js
-```
+
+## Troubleshooting
+You may run into issues with tailwind executable, please refer to [troubleshooting section in tailwindcss-ruby gem](https://github.com/flavorjones/tailwindcss-ruby?tab=readme-ov-file#troubleshooting).