Skip to content

Commit e8d99dd

Browse files
authored
chore(docs): update PurgeCSS instructions for Tailwind 3 (#34726)
As of Tailwind 3.0.0, [PurgeCSS is no-longer used](https://tailwindcss.com/docs/upgrade-guide#configure-content-sources). This commit updates the docs to reflect the new `content` config property.
1 parent 4b802ad commit e8d99dd

File tree

1 file changed

+6
-10
lines changed

1 file changed

+6
-10
lines changed

docs/docs/how-to/styling/tailwind-css.md

+6-10
Original file line numberDiff line numberDiff line change
@@ -183,28 +183,24 @@ In `gatsby-browser.js` add an import rule for your Tailwind directives and custo
183183
import "./src/css/index.css"
184184
```
185185

186-
### 4. Purging your CSS
186+
### 4. Configuring your content path
187187

188-
Now we've fully configured Tailwind CSS, we want to make sure that only the classes we need are delivered to the browser. By default, Tailwind is a very large library because it includes every combination of every class you might think of. Most of these you won't need, so we use PurgeCSS to remove any unused classes.
188+
By default, Tailwind ensures that only the classes we need are delivered to the browser. Rather than including every combination of every class you might think of, Tailwind automatically removes unused classes. Because of this, it requires a configuration file to tell it which content to scan.
189189

190-
**Note**: By default, PurgeCSS only runs on the build command as it is a relatively slow process. The development server will include all Tailwind classes, so it's highly recommended you test on a build server before deploying.
190+
**3.0.0 and above**
191191

192-
From v1.4.0 onwards PurgeCSS is built into Tailwind CSS, but the approaches needed are very similar.
193-
194-
**1.4.0 and above**
195-
196-
In 1.4.0 you can purge your CSS directly from your Tailwind config. You need to provide an array of strings telling it which files to process.
192+
You can mark files to process directly from your Tailwind config. You need to provide an array of strings telling it which files to process.
197193

198194
```js:title=tailwind.config.js
199195
module.exports = {
200-
purge: ["./src/**/*.{js,jsx,ts,tsx}"],
196+
content: ["./src/**/*.{js,jsx,ts,tsx}"],
201197
theme: {},
202198
variants: {},
203199
plugins: [],
204200
}
205201
```
206202

207-
Full documentation on this can now be found on the Tailwind site - [Tailwind PurgeCSS documentation](https://tailwindCSS.com/docs/controlling-file-size/#app)
203+
Full documentation on this can be found on the Tailwind site - [Tailwind Content Configuration documentation](https://tailwindcss.com/docs/content-configuration)
208204

209205
**Older versions**
210206

0 commit comments

Comments
 (0)