Bring Tailwind CSS example in line with official Tailwind docs (#19750)
Co-authored-by: Tim Neutkens <tim@timneutkens.nl> Co-authored-by: Tim Neutkens <timneutkens@me.com>
This commit is contained in:
Nick Carchedi
GitHub
parent
8d92010979
commit
379c4c4e33
12 changed files with 108 additions and 91 deletions
|
|
@ -1,6 +1,6 @@
|
|||
# Tailwind CSS example
|
||||
# Next.js + Tailwind CSS Example
|
||||
|
||||
This example is a basic starting point for using [Tailwind CSS](https://tailwindcss.com) with Next.js.
|
||||
This example shows how to use [Tailwind CSS](https://tailwindcss.com/) (v2) with Next.js. It follows the steps outlined in the official [Tailwind docs](https://tailwindcss.com/docs/guides/nextjs).
|
||||
|
||||
## Deploy your own
|
||||
|
||||
|
|
@ -19,12 +19,3 @@ yarn create next-app --example with-tailwindcss with-tailwindcss-app
|
|||
```
|
||||
|
||||
Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
|
||||
|
||||
## Notes
|
||||
|
||||
This example includes the following [PostCSS](https://github.com/postcss/postcss) plugins:
|
||||
|
||||
- [tailwindcss](https://tailwindcss.com) - utility-first CSS framework
|
||||
- [autoprefixer](https://github.com/postcss/autoprefixer) - plugin to parse CSS and add vendor prefixes to CSS rules using values from [Can I Use](https://caniuse.com).
|
||||
|
||||
To control the generated stylesheet's filesize, this example uses Tailwind CSS' [`purge` option](https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css) to remove unused CSS.
|
||||
|
|
|
|||
|
|
@ -1,31 +0,0 @@
|
|||
import Link from 'next/link'
|
||||
|
||||
const links = [
|
||||
{ href: 'https://github.com/vercel/next.js', label: 'GitHub' },
|
||||
{ href: 'https://nextjs.org/docs', label: 'Docs' },
|
||||
]
|
||||
|
||||
export default function Nav() {
|
||||
return (
|
||||
<nav>
|
||||
<ul className="flex items-center justify-between p-8">
|
||||
<li>
|
||||
<Link href="/">
|
||||
<a className="text-blue-500 no-underline text-accent-1 dark:text-blue-300">
|
||||
Home
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
<ul className="flex items-center justify-between space-x-4">
|
||||
{links.map(({ href, label }) => (
|
||||
<li key={`${href}${label}`}>
|
||||
<a href={href} className="no-underline btn-blue">
|
||||
{label}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</ul>
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,20 +1,18 @@
|
|||
{
|
||||
"name": "with-tailwindcss",
|
||||
"version": "1.0.0",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next",
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"start": "next start"
|
||||
},
|
||||
"dependencies": {
|
||||
"next": "latest",
|
||||
"react": "^16.13.1",
|
||||
"react-dom": "^16.13.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^10.0.4",
|
||||
"next": "10.0.3",
|
||||
"postcss": "^8.1.10",
|
||||
"autoprefixer": "10.0.2",
|
||||
"postcss": "8.1.7",
|
||||
"tailwindcss": "^2.0.2"
|
||||
},
|
||||
"license": "MIT"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import '../styles/index.css'
|
||||
import '../styles/globals.css'
|
||||
|
||||
function MyApp({ Component, pageProps }) {
|
||||
return <Component {...pageProps} />
|
||||
|
|
|
|||
6
examples/with-tailwindcss/pages/api/hello.js
Normal file
6
examples/with-tailwindcss/pages/api/hello.js
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
|
||||
|
||||
export default function helloAPI(req, res) {
|
||||
res.statusCode = 200
|
||||
res.json({ name: 'John Doe' })
|
||||
}
|
||||
|
|
@ -1,14 +1,82 @@
|
|||
import Nav from '../components/nav'
|
||||
import Head from 'next/head'
|
||||
|
||||
export default function IndexPage() {
|
||||
export default function Home() {
|
||||
return (
|
||||
<div>
|
||||
<Nav />
|
||||
<div className="py-20">
|
||||
<h1 className="text-5xl text-center text-gray-700 dark:text-gray-100">
|
||||
Next.js + Tailwind CSS 2.0
|
||||
<div className="flex flex-col items-center justify-center min-h-screen py-2">
|
||||
<Head>
|
||||
<title>Create Next App</title>
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
|
||||
<main className="flex flex-col items-center justify-center flex-1 px-20 text-center">
|
||||
<h1 className="text-6xl font-bold">
|
||||
Welcome to{' '}
|
||||
<a className="text-blue-600" href="https://nextjs.org">
|
||||
Next.js!
|
||||
</a>
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<p className="mt-3 text-2xl">
|
||||
Get started by editing{' '}
|
||||
<code className="p-3 font-mono text-lg bg-gray-100 rounded-md">
|
||||
pages/index.js
|
||||
</code>
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap items-center justify-around max-w-4xl mt-6 sm:w-full">
|
||||
<a
|
||||
href="https://nextjs.org/docs"
|
||||
className="p-6 mt-6 text-left border w-96 rounded-xl hover:text-blue-600 focus:text-blue-600"
|
||||
>
|
||||
<h3 className="text-2xl font-bold">Documentation →</h3>
|
||||
<p className="mt-4 text-xl">
|
||||
Find in-depth information about Next.js features and API.
|
||||
</p>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://nextjs.org/learn"
|
||||
className="p-6 mt-6 text-left border w-96 rounded-xl hover:text-blue-600 focus:text-blue-600"
|
||||
>
|
||||
<h3 className="text-2xl font-bold">Learn →</h3>
|
||||
<p className="mt-4 text-xl">
|
||||
Learn about Next.js in an interactive course with quizzes!
|
||||
</p>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://github.com/vercel/next.js/tree/master/examples"
|
||||
className="p-6 mt-6 text-left border w-96 rounded-xl hover:text-blue-600 focus:text-blue-600"
|
||||
>
|
||||
<h3 className="text-2xl font-bold">Examples →</h3>
|
||||
<p className="mt-4 text-xl">
|
||||
Discover and deploy boilerplate example Next.js projects.
|
||||
</p>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://vercel.com/import?filter=next.js&utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
|
||||
className="p-6 mt-6 text-left border w-96 rounded-xl hover:text-blue-600 focus:text-blue-600"
|
||||
>
|
||||
<h3 className="text-2xl font-bold">Deploy →</h3>
|
||||
<p className="mt-4 text-xl">
|
||||
Instantly deploy your Next.js site to a public URL with Vercel.
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer className="flex items-center justify-center w-full h-24 border-t">
|
||||
<a
|
||||
className="flex items-center justify-center"
|
||||
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Powered by{' '}
|
||||
<img src="/vercel.svg" alt="Vercel Logo" className="h-4 ml-2" />
|
||||
</a>
|
||||
</footer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,8 @@
|
|||
// If you want to use other PostCSS plugins, see the following:
|
||||
// https://tailwindcss.com/docs/using-with-preprocessors
|
||||
module.exports = {
|
||||
plugins: ['tailwindcss', 'autoprefixer'],
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
|
|
|
|||
BIN
examples/with-tailwindcss/public/favicon.ico
Normal file
BIN
examples/with-tailwindcss/public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
4
examples/with-tailwindcss/public/vercel.svg
Normal file
4
examples/with-tailwindcss/public/vercel.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="283" height="64" viewBox="0 0 283 64" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
3
examples/with-tailwindcss/styles/globals.css
Normal file
3
examples/with-tailwindcss/styles/globals.css
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
@tailwind base;
|
||||
|
||||
/* Write your own custom base styles here */
|
||||
|
||||
/* Start purging... */
|
||||
@tailwind components;
|
||||
/* Stop purging. */
|
||||
|
||||
html,
|
||||
body {
|
||||
@apply bg-gray-50 dark:bg-gray-900;
|
||||
}
|
||||
|
||||
/* Write your own custom component styles here */
|
||||
.btn-blue {
|
||||
@apply px-4 py-2 font-bold text-white bg-blue-500 rounded;
|
||||
}
|
||||
|
||||
/* Start purging... */
|
||||
@tailwind utilities;
|
||||
/* Stop purging. */
|
||||
|
||||
/* Your own custom utilities */
|
||||
|
|
@ -1,12 +1,8 @@
|
|||
module.exports = {
|
||||
purge: ['./components/**/*.{js,ts,jsx,tsx}', './pages/**/*.{js,ts,jsx,tsx}'],
|
||||
darkMode: 'media', // 'media' or 'class'
|
||||
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
|
||||
darkMode: false, // or 'media' or 'class'
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
'accent-1': '#333',
|
||||
},
|
||||
},
|
||||
extend: {},
|
||||
},
|
||||
variants: {
|
||||
extend: {},
|
||||
|
|
|
|||
Loading…
Reference in a new issue