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). 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..16216b2fff476 100644 --- a/examples/with-tailwindcss/postcss.config.js +++ b/examples/with-tailwindcss/postcss.config.js @@ -2,6 +2,11 @@ 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'), + require('cssnano') ] } 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;