@@ -14,7 +14,6 @@ This is the [Jekyll](http://www.jekyllrb.com/) source code for the official [Rub
1414### Prerequisites
1515
1616- ** Ruby** (latest stable version recommended) - [ Install Ruby] ( https://www.ruby-lang.org/en/documentation/installation/ )
17- - ** Node.js** (for Tailwind CSS) - [ Install Node.js] ( https://nodejs.org/ )
1817- ** Git** - [ Install Git] ( https://git-scm.com/downloads )
1918
2019### Get It Running
@@ -67,61 +66,10 @@ This is the [Jekyll](http://www.jekyllrb.com/) source code for the official [Rub
6766# Quick development server (faster rebuilds)
6867bundle exec jekyll serve --watch --future --incremental
6968
70- # development server (faster rebuilds, but may miss CSS changes)
71- bundle exec jekyll serve --watch --future
72-
7369# Full build (for testing)
7470bundle exec rake build
7571```
7672
77- ⚠️ ** About ` --incremental ` flag** : While it speeds up rebuilds, it can sometimes miss changes due to caching. If your changes aren't appearing:
78- 1 . Try restarting the server
79- 2 . If that doesn't work, clean the cache:
80- ``` sh
81- rm -rf _site .jekyll-cache
82- bundle exec jekyll serve --watch --future
83- ```
84-
85- ### 🎨 Working with Tailwind CSS
86-
87- This site uses [ Tailwind CSS] ( https://tailwindcss.com/ ) via [ jekyll-postcss-v2] ( https://github.com/mhanberg/jekyll-postcss-v2 ) .
88-
89- ** CSS is automatically processed during Jekyll builds** , so you don't need to run separate commands in most cases.
90-
91- #### CSS File Structure
92- - ` stylesheets/main.css ` - Main CSS file (imports all others + Tailwind)
93- - ` stylesheets/variables.css ` - CSS custom properties
94- - ` stylesheets/components/*.css ` - Component-specific styles
95-
96- #### When CSS Changes Don't Apply
97-
98- If you modify ` stylesheets/components/*.css ` or ` variables.css ` and changes aren't reflected:
99-
100- 1 . ** Without ` --incremental ` ** : Changes should be detected automatically
101- 2 . ** With ` --incremental ` ** : Restart Jekyll first
102- ``` sh
103- # Stop the server (Ctrl+C) and restart
104- bundle exec jekyll serve --watch --future --incremental
105- ```
106- 3 . ** Still not working?** Clean build cache and restart (this always works):
107- ``` sh
108- rm -rf _site .jekyll-cache
109- bundle exec jekyll serve --watch --future
110- ```
111-
112- 💡 ** Tip** : For CSS-heavy development, consider using ` --watch --future ` without ` --incremental ` for more reliable change detection.
113-
114- #### How It Works
115-
116- CSS processing happens automatically via PostCSS:
117- - ` postcss-import ` - Combines all CSS files into one
118- - ` tailwindcss ` - Processes Tailwind utilities based on HTML/Markdown content
119- - ` autoprefixer ` - Adds vendor prefixes for browser compatibility
120-
121- Configuration files:
122- - ` tailwind.config.js ` - Tailwind configuration
123- - ` postcss.config.js ` - PostCSS plugins
124-
12573### Testing Your Changes
12674
12775** Important** : Always run the full test suite before submitting a pull request:
@@ -176,12 +124,17 @@ If you can't build locally or want to test under production conditions:
176124- ** Found a bug?** [ Open an issue] ( https://github.com/ruby/www.ruby-lang.org/issues )
177125- ** Need more info?** Check the [ project wiki] ( https://github.com/ruby/www.ruby-lang.org/wiki )
178126
127+ ## Styling with Tailwind CSS
128+
129+ This site uses [ Tailwind CSS] ( https://tailwindcss.com/ ) for styling.
130+
131+ > ** Note:** When you modify CSS files, it might take a moment for the changes to be reflected in the preview, as the CSS needs to be rebuilt.
179132
180133## Testing
181134
182135Besides generating and previewing the site
183136you can perform additional tests with these tasks:
184-
137+
185138``` sh
186139bundle exec rake lint # run linter on markdown files
187140bundle exec rake check:markup # check markup for all generated pages
0 commit comments