├── .gitignore ├── LICENSE ├── README.md ├── next.config.js ├── now.json ├── package.json ├── pages └── index.js ├── postcss.config.js ├── styles └── style.css └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | # Created by https://www.gitignore.io/api/node 3 | # Edit at https://www.gitignore.io/?templates=node 4 | 5 | ### Node ### 6 | # Logs 7 | logs 8 | *.log 9 | npm-debug.log* 10 | yarn-debug.log* 11 | yarn-error.log* 12 | lerna-debug.log* 13 | 14 | # Diagnostic reports (https://nodejs.org/api/report.html) 15 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 16 | 17 | # Runtime data 18 | pids 19 | *.pid 20 | *.seed 21 | *.pid.lock 22 | 23 | # Directory for instrumented libs generated by jscoverage/JSCover 24 | lib-cov 25 | 26 | # Coverage directory used by tools like istanbul 27 | coverage 28 | 29 | # nyc test coverage 30 | .nyc_output 31 | 32 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 33 | .grunt 34 | 35 | # Bower dependency directory (https://bower.io/) 36 | bower_components 37 | 38 | # node-waf configuration 39 | .lock-wscript 40 | 41 | # Compiled binary addons (https://nodejs.org/api/addons.html) 42 | build/Release 43 | 44 | # Dependency directories 45 | node_modules/ 46 | jspm_packages/ 47 | 48 | # TypeScript v1 declaration files 49 | typings/ 50 | 51 | # Optional npm cache directory 52 | .npm 53 | 54 | # Optional eslint cache 55 | .eslintcache 56 | 57 | # Optional REPL history 58 | .node_repl_history 59 | 60 | # Output of 'npm pack' 61 | *.tgz 62 | 63 | # Yarn Integrity file 64 | .yarn-integrity 65 | 66 | # dotenv environment variables file 67 | .env 68 | .env.test 69 | 70 | # parcel-bundler cache (https://parceljs.org/) 71 | .cache 72 | 73 | # next.js build output 74 | .next 75 | 76 | # nuxt.js build output 77 | .nuxt 78 | 79 | # vuepress build output 80 | .vuepress/dist 81 | 82 | # Serverless directories 83 | .serverless/ 84 | 85 | # FuseBox cache 86 | .fusebox/ 87 | 88 | # DynamoDB Local files 89 | .dynamodb/ 90 | 91 | # End of https://www.gitignore.io/api/node 92 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Tracy Adams 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Tailwind CSS & Next.js Starter Kit 2 | 3 | I am archiving this repository as there's now an official example you can use. Please refer to [https://github.com/zeit/next.js/tree/canary/examples/with-tailwindcss](https://github.com/zeit/next.js/tree/canary/examples/with-tailwindcss) for a great starter. 4 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | const withCSS = require("@zeit/next-css"); 2 | module.exports = withCSS({ 3 | target: "serverless" 4 | }); 5 | -------------------------------------------------------------------------------- /now.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": 2, 3 | "name": "nextjs-starter", 4 | "builds": [{ "src": "next.config.js", "use": "@now/next" }] 5 | } 6 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tailwindcss-nextjs-starter", 3 | "author": { 4 | "name": "Tracy Adams", 5 | "email": "tracy@tracycodes.com", 6 | "url": "https://tracycodes.com" 7 | }, 8 | "repository": { 9 | "type": "git", 10 | "url": "https://github.com/tracy-codes/tailwindcss-nextjs-starter.git" 11 | }, 12 | "bugs": { 13 | "url": "https://github.com/tracy-codes/tailwindcss-nextjs-starter/issues" 14 | }, 15 | "homepage": "https://github.com/tracy-codes/tailwindcss-nextjs-starter/", 16 | "version": "1.0.0", 17 | "main": "index.js", 18 | "license": "MIT", 19 | "dependencies": { 20 | "@zeit/next-css": "^1.0.1", 21 | "autoprefixer": "^9.6.0", 22 | "next": "^9.0.7", 23 | "react": "^16.8.6", 24 | "react-dom": "^16.8.6" 25 | }, 26 | "scripts": { 27 | "dev": "next", 28 | "build": "next build", 29 | "start": "next start", 30 | "deploy": "now" 31 | }, 32 | "devDependencies": { 33 | "tailwindcss": "^1.0.4" 34 | }, 35 | "resolutions": { 36 | "lodash": "^4.17.13" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /pages/index.js: -------------------------------------------------------------------------------- 1 | import "../styles/style.css"; 2 | 3 | export default () => { 4 | return ( 5 |

6 | Tailwind CSS ➡ Next.jS Starter 7 |

8 | ); 9 | }; 10 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | // ... 4 | require("tailwindcss"), 5 | require("autoprefixer") 6 | // ... 7 | ] 8 | }; 9 | -------------------------------------------------------------------------------- /styles/style.css: -------------------------------------------------------------------------------- 1 | @tailwind base; /* Preflight will be injected here */ 2 | 3 | @tailwind components; 4 | 5 | @tailwind utilities; 6 | --------------------------------------------------------------------------------