From eccadd6b332dce6b13f5a7dd58e25c4e38cae26b Mon Sep 17 00:00:00 2001 From: Taylor Bryant Date: Sun, 20 Oct 2019 22:32:21 -0500 Subject: [PATCH 1/6] Add Purgecss --- examples/with-tailwindcss/package.json | 1 + examples/with-tailwindcss/postcss.config.js | 8 ++++++-- examples/with-tailwindcss/styles/index.css | 2 ++ 3 files changed, 9 insertions(+), 2 deletions(-) diff --git a/examples/with-tailwindcss/package.json b/examples/with-tailwindcss/package.json index ef22b53c5c1ca..4d710f80b05f6 100644 --- a/examples/with-tailwindcss/package.json +++ b/examples/with-tailwindcss/package.json @@ -13,6 +13,7 @@ "react-dom": "^16.7.0" }, "devDependencies": { + "@fullhuman/postcss-purgecss": "^1.3.0", "autoprefixer": "^7.1.6", "cssnano": "^3.10.0", "postcss-easy-import": "^3.0.0", diff --git a/examples/with-tailwindcss/postcss.config.js b/examples/with-tailwindcss/postcss.config.js index c7cf4143d14c2..6595bfaf95d59 100644 --- a/examples/with-tailwindcss/postcss.config.js +++ b/examples/with-tailwindcss/postcss.config.js @@ -2,6 +2,10 @@ module.exports = { plugins: [ require('postcss-easy-import'), require('tailwindcss'), - require('autoprefixer') - ] + require('@fullhuman/postcss-purgecss')({ + content: ['./pages/**/*.js', './components/**/*.js'], + defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || [], + }), + require('autoprefixer'), + ], } diff --git a/examples/with-tailwindcss/styles/index.css b/examples/with-tailwindcss/styles/index.css index 4352eb2bb0710..2d0bb03d96190 100644 --- a/examples/with-tailwindcss/styles/index.css +++ b/examples/with-tailwindcss/styles/index.css @@ -1,6 +1,8 @@ @import './button.css'; +/* purgecss start ignore */ @tailwind base; +/* purgecss end ignore */ @tailwind components; @tailwind utilities; From e1814c2a00306e08fb2959c68f402d23485150c4 Mon Sep 17 00:00:00 2001 From: Taylor Bryant Date: Sun, 20 Oct 2019 22:38:40 -0500 Subject: [PATCH 2/6] Remove trailing comma --- examples/with-tailwindcss/postcss.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/with-tailwindcss/postcss.config.js b/examples/with-tailwindcss/postcss.config.js index 6595bfaf95d59..ef72447e2e680 100644 --- a/examples/with-tailwindcss/postcss.config.js +++ b/examples/with-tailwindcss/postcss.config.js @@ -6,6 +6,6 @@ module.exports = { content: ['./pages/**/*.js', './components/**/*.js'], defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || [], }), - require('autoprefixer'), + require('autoprefixer') ], } From 5839ffeb0c813fce287401df1659575b01a1a7bc Mon Sep 17 00:00:00 2001 From: Taylor Bryant Date: Sun, 20 Oct 2019 22:48:17 -0500 Subject: [PATCH 3/6] Fix linting errors --- examples/with-tailwindcss/postcss.config.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/with-tailwindcss/postcss.config.js b/examples/with-tailwindcss/postcss.config.js index ef72447e2e680..828839bcaf284 100644 --- a/examples/with-tailwindcss/postcss.config.js +++ b/examples/with-tailwindcss/postcss.config.js @@ -4,8 +4,8 @@ module.exports = { require('tailwindcss'), require('@fullhuman/postcss-purgecss')({ content: ['./pages/**/*.js', './components/**/*.js'], - defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || [], + defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || [] }), require('autoprefixer') - ], + ] } From aa1e171983b126fb4a08a3636a9702c59665cf65 Mon Sep 17 00:00:00 2001 From: Taylor Bryant Date: Tue, 22 Oct 2019 21:37:26 -0500 Subject: [PATCH 4/6] Update README.md --- examples/with-tailwindcss/README.md | 43 +++++++---------------------- 1 file changed, 10 insertions(+), 33 deletions(-) diff --git a/examples/with-tailwindcss/README.md b/examples/with-tailwindcss/README.md index 01e2c622d7a6f..f84c6efcddea9 100644 --- a/examples/with-tailwindcss/README.md +++ b/examples/with-tailwindcss/README.md @@ -1,6 +1,6 @@ # Tailwind CSS example -This is an example of how you can include a global stylesheet in a next.js webapp. +This is an example of using [Tailwind CSS](https://tailwindcss.com) in a Next.js project. ## How to use @@ -23,9 +23,7 @@ curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 cd with-tailwindcss ``` -**Running** - -To get this example running you just need to +Install it and run: ```bash npm install @@ -35,41 +33,20 @@ yarn yarn dev ``` -Visit [http://localhost:3000](http://localhost:3000) and try to modify `styles/index.css`. - Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)) ```bash now ``` -### Extras - -In the `package.json` you'll see some extra commands. - -- `yarn dev:css` - - used by `yarn dev` generate css bundle and watch css files for changes - - includes css imported into `index.css` - - will **not** autoreload browser when css changes -- `yarn build:css` - - used by `yarn build` to generate css bundle - -These can be used manually but using the usual commands will run them anyways. - ## The idea behind the example -This setup is a basic starting point for using tailwind css and next. Along with tailwind, this example -also uses some other postcss plugins for imports, autoprefixing, and stripping whitespace/comments. The imports simply -allow for an easy way to split up css files but still get one bundled css file in `static/css/bundle.css`. -Changing stylesheets does not trigger auto-reloads. Setting up auto-reloads was avoided -because the next.js read me does not recommend doing so. Although, that can easily be done with -some webpack loaders. If you are curious about using loaders with next look at this -[example](https://github.com/zeit/next.js/tree/canary/examples/with-global-stylesheet). - -This project shows how you can set it up. Have a look at: +This setup is a basic starting point for using [Tailwind CSS](https://tailwindcss.com) with Next.js. This example also includes the following [PostCSS](https://github.com/postcss/postcss) plugins: +- [autoprefixer](https://github.com/postcss/autoprefixer) - Adds vendor prefixes to CSS rules in your stylesheet using values from [Can I Use](https://caniuse.com/) +- [purgecss](https://github.com/FullHuman/purgecss) - Removes unused CSS +- [cssnano](https://cssnano.co/) - Minifies CSS +- [postcss-easy-import](https://github.com/TrySound/postcss-easy-import) - Allows importing one stylesheet into another -- pages/\_document.js -- styles/config/postcss.config.js -- styles/config/tailwind.config.js -- styles/index.css -- styles/button.css +## Limitations +### Dynamically generated class strings will be purged +Purgecss takes a very straightforward approach to removing unused CSS. It simply searches an entire file for a string that matches a regular expression. As a result, class strings that are dynamically created in a template using string concatenation will be considered unused and removed from your stylesheet. Tailwind CSS addresses this problem in more detail in [their documentation](https://tailwindcss.com/docs/controlling-file-size#writing-purgeable-html). From be6aba09f7cfa7ba6f388991cde3e4810ca75d2c Mon Sep 17 00:00:00 2001 From: Taylor Bryant Date: Tue, 22 Oct 2019 21:42:27 -0500 Subject: [PATCH 5/6] Add cssnano to PostCSS plugins --- examples/with-tailwindcss/postcss.config.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/examples/with-tailwindcss/postcss.config.js b/examples/with-tailwindcss/postcss.config.js index 828839bcaf284..87c6537fc11a7 100644 --- a/examples/with-tailwindcss/postcss.config.js +++ b/examples/with-tailwindcss/postcss.config.js @@ -6,6 +6,7 @@ module.exports = { content: ['./pages/**/*.js', './components/**/*.js'], defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || [] }), - require('autoprefixer') + require('autoprefixer'), + require("cssnano") ] } From 55149f4b94cc9d67b98b4b663492b3d011a1b786 Mon Sep 17 00:00:00 2001 From: Taylor Bryant Date: Tue, 22 Oct 2019 21:42:49 -0500 Subject: [PATCH 6/6] Use single quotes --- examples/with-tailwindcss/postcss.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/with-tailwindcss/postcss.config.js b/examples/with-tailwindcss/postcss.config.js index 87c6537fc11a7..16216b2fff476 100644 --- a/examples/with-tailwindcss/postcss.config.js +++ b/examples/with-tailwindcss/postcss.config.js @@ -7,6 +7,6 @@ module.exports = { defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || [] }), require('autoprefixer'), - require("cssnano") + require('cssnano') ] }