├── next.config.js
├── static
└── css
│ └── tailwind.css
├── tailwind.config.js
├── pages
├── api
│ └── post.js
└── index.js
├── components
└── Layout.js
├── now.json
├── postcss.config.js
├── package.json
├── README.md
└── .gitignore
/next.config.js:
--------------------------------------------------------------------------------
1 | const withCSS = require('@zeit/next-css')
2 |
3 | module.exports = withCSS()
4 |
--------------------------------------------------------------------------------
/static/css/tailwind.css:
--------------------------------------------------------------------------------
1 | @import "tailwindcss/base";
2 | @import "tailwindcss/components";
3 | @import "tailwindcss/utilities";
4 |
--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | theme: {
3 | extend: {},
4 | },
5 | variants: {},
6 | plugins: [],
7 | }
8 |
--------------------------------------------------------------------------------
/pages/api/post.js:
--------------------------------------------------------------------------------
1 | export default (req, res) => {
2 | res.setHeader("Content-Type", "application/json");
3 | res.statusCode = 200;
4 | res.end(JSON.stringify({ name: "Nextjs" }));
5 | };
6 |
--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
1 | import Layout from '../components/Layout'
2 |
3 | export default () => (
4 |
5 | Hello world!
6 |
7 | )
8 |
--------------------------------------------------------------------------------
/components/Layout.js:
--------------------------------------------------------------------------------
1 | import "../static/css/tailwind.css";
2 |
3 | export default ({ children }) => {
4 | return (
5 |
6 | {children}
7 |
8 | );
9 | };
10 |
--------------------------------------------------------------------------------
/now.json:
--------------------------------------------------------------------------------
1 | {
2 | "version": 2,
3 | "name": "with-tailwindcss",
4 | "regions": ["all"],
5 | "builds": [
6 | { "src": "/static/*", "use": "@now/static" },
7 | { "src": "next.config.js", "use": "@now/next" }
8 | ],
9 | "routes": [
10 | { "src": "/static/(.*)", "dest": "/static/$1" },
11 | { "src": "/(.*)", "dest": "/$1" }
12 | ]
13 | }
14 |
--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | const purgecss = require("@fullhuman/postcss-purgecss")({
2 | content: ["./components/**/*.js", "./pages/**/*.js"],
3 | defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
4 | });
5 |
6 | module.exports = {
7 | plugins: [
8 | require("postcss-import"),
9 | require("tailwindcss"),
10 | require("autoprefixer"),
11 | ...(process.env.NODE_ENV === "production" ? [purgecss] : [])
12 | ]
13 | };
14 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "with-tailwindcss",
3 | "version": "1.0.0",
4 | "license": "ISC",
5 | "engines": {
6 | "node": "10.x"
7 | },
8 | "scripts": {
9 | "dev": "next dev",
10 | "build": "next build",
11 | "start": "next start"
12 | },
13 | "dependencies": {
14 | "@fullhuman/postcss-purgecss": "^1.2.0",
15 | "@zeit/next-css": "^1.0.1",
16 | "autoprefixer": "^9.6.0",
17 | "next": "^9.0.0",
18 | "postcss-import": "^12.0.1",
19 | "react": "^16.8.6",
20 | "react-dom": "^16.8.6",
21 | "tailwindcss": "^1.0.3"
22 | },
23 | "devDependencies": {
24 | "webpack": "^4.35.2"
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Next.js
2 |
3 | To add Tailwind to a Next project, start by installing `@zeit/next-css`, `tailwindcss`, `postcss-import` and `autoprefixer`:
4 |
5 | ```sh
6 | npm install @zeit/next-css tailwindcss postcss-import autoprefixer
7 | ```
8 |
9 | Next, set up your PostCSS plugins by creating a `postcss.config.js` file and adding the following configuration:
10 |
11 | ```js
12 | module.exports = {
13 | plugins: [
14 | require('postcss-import'),
15 | require('tailwindcss'),
16 | require('autoprefixer'),
17 | ]
18 | }
19 | ```
20 |
21 | Next, create a CSS file in your `static` folder for your Tailwind styles. We've used `static/css/tailwind.css` for this example:
22 |
23 | ```css
24 | @import "tailwindcss/base";
25 | @import "tailwindcss/components";
26 | @import "tailwindcss/utilities";
27 | ```
28 |
29 | Finally, import your CSS in your main layout component. Here we're using `components/Layout.js`:
30 |
31 | ```jsx
32 | import '../static/css/tailwind.css'
33 |
34 | export default ({ children }) => (
35 |
36 | // ...
37 |
38 | )
39 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 |
8 | # Runtime data
9 | pids
10 | *.pid
11 | *.seed
12 | *.pid.lock
13 |
14 | # Directory for instrumented libs generated by jscoverage/JSCover
15 | lib-cov
16 |
17 | # Coverage directory used by tools like istanbul
18 | coverage
19 |
20 | # nyc test coverage
21 | .nyc_output
22 |
23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24 | .grunt
25 |
26 | # Bower dependency directory (https://bower.io/)
27 | bower_components
28 |
29 | # node-waf configuration
30 | .lock-wscript
31 |
32 | # Compiled binary addons (https://nodejs.org/api/addons.html)
33 | build/Release
34 |
35 | # Dependency directories
36 | node_modules/
37 | jspm_packages/
38 |
39 | # TypeScript v1 declaration files
40 | typings/
41 |
42 | # Optional npm cache directory
43 | .npm
44 |
45 | # Optional eslint cache
46 | .eslintcache
47 |
48 | # Optional REPL history
49 | .node_repl_history
50 |
51 | # Output of 'npm pack'
52 | *.tgz
53 |
54 | # Yarn Integrity file
55 | .yarn-integrity
56 |
57 | # dotenv environment variables file
58 | .env
59 |
60 | # next.js build output
61 | .next
62 |
63 | tags
64 |
65 | .DS_Store
66 |
--------------------------------------------------------------------------------