Skip to content

N
next.js

CoCo_Code_Op2 / next.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 1
Star 0
Fork 0
N
next.js

体验新版 GitCode，发现更多精彩内容 >>

提交 196f71fe 编写于 作者: J Jamie Barton 提交者： Tim Neutkens
浏览文件
操作

Refactor with tailwindcss example to use next-css (#5461) 

Instead of bundling `postcss-cli` we can now make use of `@zeit/with-css`.

This also means we can get rid of the `<style>` import and concurrent build step for css. 🎉
上级 ed2c379f
隐藏空白更改
内联 并排
Showing with 316 addition and 258 deletion
examples/with-tailwindcss/components/head.js 已删除 100644 → 0
浏览文件 @ ed2c379f
import NextHead from 'next/head'
import { string } from 'prop-types'
const defaultDescription = ''
const defaultOGURL = ''
const defaultOGImage = ''
const Head = (props) => (
<NextHead>
<meta charset='UTF-8' />
<title>{props.title || ''}</title>
<meta name='description' content={props.description || defaultDescription} />
<meta name='viewport' content='width=device-width, initial-scale=1' />
<link rel='icon' sizes='192x192' href='/static/touch-icon.png' />
<link rel='apple-touch-icon' href='/static/touch-icon.png' />
<link rel='mask-icon' href='/static/favicon-mask.svg' color='#49B882' />
<link rel='icon' href='/static/favicon.ico' />
<meta property='og:url' content={props.url || defaultOGURL} />
<meta property='og:title' content={props.title || ''} />
<meta property='og:description' content={props.description || defaultDescription} />
<meta name='twitter:site' content={props.url || defaultOGURL} />
<meta name='twitter:card' content='summary_large_image' />
<meta name='twitter:image' content={props.ogImage || defaultOGImage} />
<meta property='og:image' content={props.ogImage || defaultOGImage} />
<meta property='og:image:width' content='1200' />
<meta property='og:image:height' content='630' />
</NextHead>
)
Head.propTypes = {
title: string,
description: string,
url: string,
ogImage: string
}
export default Head
examples/with-tailwindcss/components/nav.js
浏览文件 @ 196f71fe
import Link from 'next/link' import Link from 'next/link'
const links = [ const links = [
{ href: 'https://github.com/segmentio/create-next-app', label: 'Github' } { href: 'https://github.com/zeit/next.js', label: 'Github' },
].map(link => { { href: 'https://nextjs.org/docs', label: 'Docs' }
link.key = `nav-link-${link.href}-${link.label}` ]
return link
})
const Nav = () => ( export default function Nav () {
<nav> return <nav>
<ul> <ul className='flex justify-between items-center p-8'>
<li> <li className='list-reset'>
<Link prefetch href='/'> <Link prefetch href='/'>
<a>Home</a> <a className='text-blue no-underline'>Home</a>
</Link> </Link>
</li> </li>
<ul> <ul className='flex justify-between items-center'>
{links.map( {links.map(
({ key, href, label }) => ( ({ href, label }) => (
<li key={key}> <li key={`${href}${label}`} className='list-reset ml-4'>
<Link href={href}> <Link href={href}>
<a className='btn-blue'>{label}</a> <a className='btn-blue no-underline'>{label}</a>
</Link> </Link>
</li> </li>
) )
)} )}
</ul> </ul>
</ul> </ul>
<style jsx>{`
:global(body) {
margin: 0;
font-family: -apple-system,BlinkMacSystemFont,Avenir Next,Avenir,Helvetica,sans-serif;
}
nav {
text-align: center;
}
ul {
display: flex;
justify-content: space-between;
}
nav > ul {
padding: 4px 16px;
}
li {
display: flex;
padding: 6px 8px;
}
a {
color: #067df7;
text-decoration: none;
font-size: 13px;
}
`}</style>
</nav> </nav>
) }
export default Nav
examples/with-tailwindcss/next.config.js 0 → 100644
浏览文件 @ 196f71fe
const withCSS = require('@zeit/next-css')
module.exports = withCSS({})
examples/with-tailwindcss/package.json
浏览文件 @ 196f71fe
...@@ -2,13 +2,12 @@ ...@@ -2,13 +2,12 @@
"name": "with-tailwindcss", "name": "with-tailwindcss",
"version": "1.0.0", "version": "1.0.0",
"scripts": { "scripts": {
"dev": "next & yarn dev:css", "dev": "next",
"dev:css": "postcss styles/index.css --watch -c styles/config/postcss.config.js -o static/css/bundle.css", "build": "next build",
"build": "next build & yarn build:css",
"build:css": "postcss styles/index.css -c styles/config/postcss.config.js -o static/css/bundle.css",
"start": "next start" "start": "next start"
}, },
"dependencies": { "dependencies": {
"@zeit/next-css": "^1.0.1",
"next": "latest", "next": "latest",
"react": "^16.0.0", "react": "^16.0.0",
"react-dom": "^16.0.0" "react-dom": "^16.0.0"
...@@ -16,8 +15,7 @@ ...@@ -16,8 +15,7 @@
"devDependencies": { "devDependencies": {
"autoprefixer": "^7.1.6", "autoprefixer": "^7.1.6",
"cssnano": "^3.10.0", "cssnano": "^3.10.0",
"postcss-cli": "^4.1.1",
"postcss-easy-import": "^3.0.0", "postcss-easy-import": "^3.0.0",
"tailwindcss": "^0.2.2" "tailwindcss": "^0.6.6"
} }
} }
examples/with-tailwindcss/pages/_app.js 0 → 100644
浏览文件 @ 196f71fe
import '../styles/index.css'
import React from 'react'
import App, { Container } from 'next/app'
export default class MyApp extends App {
render () {
const { Component, pageProps } = this.props
return (
<Container>
<Component {...pageProps} />
</Container>
)
}
}
examples/with-tailwindcss/pages/_document.js 已删除 100644 → 0
浏览文件 @ ed2c379f
import Document, { Head, Main, NextScript } from 'next/document'
class MyDocument extends Document {
static getInitialProps ({ renderPage }) {
const { html, head, errorHtml, chunks } = renderPage()
return { html, head, errorHtml, chunks }
}
render () {
return (
<html>
<Head>
<link rel='stylesheet' href='/static/css/bundle.css' />
</Head>
<body>
{this.props.customValue}
<Main />
<NextScript />
</body>
</html>
)
}
}
export default MyDocument
examples/with-tailwindcss/pages/index.js
浏览文件 @ 196f71fe
import Head from '../components/head'
import Nav from '../components/nav' import Nav from '../components/nav'
export default () => ( export default () => (
<div> <div>
<Head title='Home' />
<Nav /> <Nav />
<div className='hero'> <div className='hero'>
<h1 className='title'>Next.js + Tailwind css</h1> <h1 className='title'>Next.js + Tailwind css</h1>
......
examples/with-tailwindcss/styles/config/postcss.config.js → examples/with-tailwindcss/postcss.config.js
浏览文件 @ 196f71fe
...@@ -3,8 +3,7 @@ var tailwindcss = require('tailwindcss') ...@@ -3,8 +3,7 @@ var tailwindcss = require('tailwindcss')
module.exports = { module.exports = {
plugins: [ plugins: [
require('postcss-easy-import'), require('postcss-easy-import'),
tailwindcss('./styles/config/tailwind.config.js'), tailwindcss('./tailwind.config.js'),
require('autoprefixer'), require('autoprefixer')
require('cssnano')
] ]
} }
examples/with-tailwindcss/styles/index.css
浏览文件 @ 196f71fe
...@@ -19,37 +19,3 @@ ...@@ -19,37 +19,3 @@
.title, .description { .title, .description {
text-align: center; text-align: center;
} }
.row {
max-width: 880px;
margin: 80px auto 40px;
display: flex;
flex-direction: row;
justify-content: space-around;
}
.card {
padding: 18px 18px 24px;
width: 220px;
text-align: left;
text-decoration: none;
color: #434343;
border: 1px solid #9B9B9B;
}
.card:hover {
border-color: #067df7;
}
.card h3 {
margin: 0;
color: #067df7;
font-size: 18px;
}
.card p {
margin: 0;
padding: 12px 0 0;
font-size: 13px;
color: #333;
}
examples/with-tailwindcss/styles/config/tailwind.config.js → examples/with-tailwindcss/tailwind.config.js
浏览文件 @ 196f71fe
...@@ -23,7 +23,7 @@ View the full documentation at https://tailwindcss.com. ...@@ -23,7 +23,7 @@ View the full documentation at https://tailwindcss.com.
| |
*/ */
// var defaultConfig = require('tailwindcss/defaultConfig')() // let defaultConfig = require('tailwindcss/defaultConfig')()
/* /*
|------------------------------------------------------------------------------- |-------------------------------------------------------------------------------
...@@ -41,31 +41,31 @@ View the full documentation at https://tailwindcss.com. ...@@ -41,31 +41,31 @@ View the full documentation at https://tailwindcss.com.
| |
*/ */
var colors = { let colors = {
'transparent': 'transparent', transparent: 'transparent',
'black': '#222b2f', black: '#22292f',
'grey-darkest': '#364349', 'grey-darkest': '#3d4852',
'grey-darker': '#596a73', 'grey-darker': '#606f7b',
'grey-dark': '#70818a', 'grey-dark': '#8795a1',
'grey': '#9babb4', grey: '#b8c2cc',
'grey-light': '#dae4e9', 'grey-light': '#dae1e7',
'grey-lighter': '#f3f7f9', 'grey-lighter': '#f1f5f8',
'grey-lightest': '#fafcfc', 'grey-lightest': '#f8fafc',
'white': '#ffffff', white: '#ffffff',
'red-darkest': '#420806', 'red-darkest': '#3b0d0c',
'red-darker': '#6a1b19', 'red-darker': '#621b18',
'red-dark': '#cc1f1a', 'red-dark': '#cc1f1a',
'red': '#e3342f', red: '#e3342f',
'red-light': '#ef5753', 'red-light': '#ef5753',
'red-lighter': '#f9acaa', 'red-lighter': '#f9acaa',
'red-lightest': '#fcebea', 'red-lightest': '#fcebea',
'orange-darkest': '#542605', 'orange-darkest': '#462a16',
'orange-darker': '#7f4012', 'orange-darker': '#613b1f',
'orange-dark': '#de751f', 'orange-dark': '#de751f',
'orange': '#f6993f', orange: '#f6993f',
'orange-light': '#faad63', 'orange-light': '#faad63',
'orange-lighter': '#fcd9b6', 'orange-lighter': '#fcd9b6',
'orange-lightest': '#fff5eb', 'orange-lightest': '#fff5eb',
...@@ -73,31 +73,31 @@ var colors = { ...@@ -73,31 +73,31 @@ var colors = {
'yellow-darkest': '#453411', 'yellow-darkest': '#453411',
'yellow-darker': '#684f1d', 'yellow-darker': '#684f1d',
'yellow-dark': '#f2d024', 'yellow-dark': '#f2d024',
'yellow': '#ffed4a', yellow: '#ffed4a',
'yellow-light': '#fff382', 'yellow-light': '#fff382',
'yellow-lighter': '#fff9c2', 'yellow-lighter': '#fff9c2',
'yellow-lightest': '#fcfbeb', 'yellow-lightest': '#fcfbeb',
'green-darkest': '#032d19', 'green-darkest': '#0f2f21',
'green-darker': '#0b4228', 'green-darker': '#1a4731',
'green-dark': '#1f9d55', 'green-dark': '#1f9d55',
'green': '#38c172', green: '#38c172',
'green-light': '#51d88a', 'green-light': '#51d88a',
'green-lighter': '#a2f5bf', 'green-lighter': '#a2f5bf',
'green-lightest': '#e3fcec', 'green-lightest': '#e3fcec',
'teal-darkest': '#0d3331', 'teal-darkest': '#0d3331',
'teal-darker': '#174e4b', 'teal-darker': '#20504f',
'teal-dark': '#38a89d', 'teal-dark': '#38a89d',
'teal': '#4dc0b5', teal: '#4dc0b5',
'teal-light': '#64d5ca', 'teal-light': '#64d5ca',
'teal-lighter': '#a0f0ed', 'teal-lighter': '#a0f0ed',
'teal-lightest': '#e8fffe', 'teal-lightest': '#e8fffe',
'blue-darkest': '#05233b', 'blue-darkest': '#12283a',
'blue-darker': '#103d60', 'blue-darker': '#1c3d5a',
'blue-dark': '#2779bd', 'blue-dark': '#2779bd',
'blue': '#3490dc', blue: '#3490dc',
'blue-light': '#6cb2eb', 'blue-light': '#6cb2eb',
'blue-lighter': '#bcdefa', 'blue-lighter': '#bcdefa',
'blue-lightest': '#eff8ff', 'blue-lightest': '#eff8ff',
...@@ -105,30 +105,29 @@ var colors = { ...@@ -105,30 +105,29 @@ var colors = {
'indigo-darkest': '#191e38', 'indigo-darkest': '#191e38',
'indigo-darker': '#2f365f', 'indigo-darker': '#2f365f',
'indigo-dark': '#5661b3', 'indigo-dark': '#5661b3',
'indigo': '#6574cd', indigo: '#6574cd',
'indigo-light': '#7886d7', 'indigo-light': '#7886d7',
'indigo-lighter': '#b2b7ff', 'indigo-lighter': '#b2b7ff',
'indigo-lightest': '#e6e8ff', 'indigo-lightest': '#e6e8ff',
'purple-darkest': '#1f133f', 'purple-darkest': '#21183c',
'purple-darker': '#352465', 'purple-darker': '#382b5f',
'purple-dark': '#794acf', 'purple-dark': '#794acf',
'purple': '#9561e2', purple: '#9561e2',
'purple-light': '#a779e9', 'purple-light': '#a779e9',
'purple-lighter': '#d6bbfc', 'purple-lighter': '#d6bbfc',
'purple-lightest': '#f3ebff', 'purple-lightest': '#f3ebff',
'pink-darkest': '#45051e', 'pink-darkest': '#451225',
'pink-darker': '#72173a', 'pink-darker': '#6f213f',
'pink-dark': '#eb5286', 'pink-dark': '#eb5286',
'pink': '#f66d9b', pink: '#f66d9b',
'pink-light': '#fa7ea8', 'pink-light': '#fa7ea8',
'pink-lighter': '#ffbbca', 'pink-lighter': '#ffbbca',
'pink-lightest': '#ffebef' 'pink-lightest': '#ffebef'
} }
module.exports = { module.exports = {
/* /*
|----------------------------------------------------------------------------- |-----------------------------------------------------------------------------
| Colors https://tailwindcss.com/docs/colors | Colors https://tailwindcss.com/docs/colors
...@@ -164,10 +163,10 @@ module.exports = { ...@@ -164,10 +163,10 @@ module.exports = {
*/ */
screens: { screens: {
'sm': '576px', sm: '576px',
'md': '768px', md: '768px',
'lg': '992px', lg: '992px',
'xl': '1200px' xl: '1200px'
}, },
/* /*
...@@ -189,9 +188,10 @@ module.exports = { ...@@ -189,9 +188,10 @@ module.exports = {
*/ */
fonts: { fonts: {
'sans': [ sans: [
'-apple-system', 'system-ui',
'BlinkMacSystemFont', 'BlinkMacSystemFont',
'-apple-system',
'Segoe UI', 'Segoe UI',
'Roboto', 'Roboto',
'Oxygen', 'Oxygen',
...@@ -202,7 +202,7 @@ module.exports = { ...@@ -202,7 +202,7 @@ module.exports = {
'Helvetica Neue', 'Helvetica Neue',
'sans-serif' 'sans-serif'
], ],
'serif': [ serif: [
'Constantia', 'Constantia',
'Lucida Bright', 'Lucida Bright',
'Lucidabright', 'Lucidabright',
...@@ -214,7 +214,7 @@ module.exports = { ...@@ -214,7 +214,7 @@ module.exports = {
'Georgia', 'Georgia',
'serif' 'serif'
], ],
'mono': [ mono: [
'Menlo', 'Menlo',
'Monaco', 'Monaco',
'Consolas', 'Consolas',
...@@ -244,11 +244,11 @@ module.exports = { ...@@ -244,11 +244,11 @@ module.exports = {
*/ */
textSizes: { textSizes: {
'xs': '.75rem', // 12px xs: '.75rem', // 12px
'sm': '.875rem', // 14px sm: '.875rem', // 14px
'base': '1rem', // 16px base: '1rem', // 16px
'lg': '1.125rem', // 18px lg: '1.125rem', // 18px
'xl': '1.25rem', // 20px xl: '1.25rem', // 20px
'2xl': '1.5rem', // 24px '2xl': '1.5rem', // 24px
'3xl': '1.875rem', // 30px '3xl': '1.875rem', // 30px
'4xl': '2.25rem', // 36px '4xl': '2.25rem', // 36px
...@@ -270,15 +270,15 @@ module.exports = { ...@@ -270,15 +270,15 @@ module.exports = {
*/ */
fontWeights: { fontWeights: {
'hairline': 100, hairline: 100,
'thin': 200, thin: 200,
'light': 300, light: 300,
'normal': 400, normal: 400,
'medium': 500, medium: 500,
'semibold': 600, semibold: 600,
'bold': 700, bold: 700,
'extrabold': 800, extrabold: 800,
'black': 900 black: 900
}, },
/* /*
...@@ -294,10 +294,10 @@ module.exports = { ...@@ -294,10 +294,10 @@ module.exports = {
*/ */
leading: { leading: {
'none': 1, none: 1,
'tight': 1.25, tight: 1.25,
'normal': 1.5, normal: 1.5,
'loose': 2 loose: 2
}, },
/* /*
...@@ -313,9 +313,9 @@ module.exports = { ...@@ -313,9 +313,9 @@ module.exports = {
*/ */
tracking: { tracking: {
'tight': '-0.05em', tight: '-0.05em',
'normal': '0', normal: '0',
'wide': '0.05em' wide: '0.05em'
}, },
/* /*
...@@ -348,6 +348,25 @@ module.exports = { ...@@ -348,6 +348,25 @@ module.exports = {
backgroundColors: colors, backgroundColors: colors,
/*
|-----------------------------------------------------------------------------
| Background sizes https://tailwindcss.com/docs/background-size
|-----------------------------------------------------------------------------
|
| Here is where you define your background sizes. We provide some common
| values that are useful in most projects, but feel free to add other sizes
| that are specific to your project here as well.
|
| Class name: .bg-{size}
|
*/
backgroundSize: {
auto: 'auto',
cover: 'cover',
contain: 'contain'
},
/* /*
|----------------------------------------------------------------------------- |-----------------------------------------------------------------------------
| Border widths https://tailwindcss.com/docs/border-width | Border widths https://tailwindcss.com/docs/border-width
...@@ -386,7 +405,7 @@ module.exports = { ...@@ -386,7 +405,7 @@ module.exports = {
| |
*/ */
borderColors: Object.assign({ default: colors['grey-light'] }, colors), borderColors: global.Object.assign({ default: colors['grey-light'] }, colors),
/* /*
|----------------------------------------------------------------------------- |-----------------------------------------------------------------------------
...@@ -405,11 +424,11 @@ module.exports = { ...@@ -405,11 +424,11 @@ module.exports = {
*/ */
borderRadius: { borderRadius: {
'none': '0', none: '0',
'sm': '.125rem', sm: '.125rem',
default: '.25rem', default: '.25rem',
'lg': '.5rem', lg: '.5rem',
'full': '9999px' full: '9999px'
}, },
/* /*
...@@ -433,12 +452,13 @@ module.exports = { ...@@ -433,12 +452,13 @@ module.exports = {
*/ */
width: { width: {
'auto': 'auto', auto: 'auto',
'px': '1px', px: '1px',
'1': '0.25rem', '1': '0.25rem',
'2': '0.5rem', '2': '0.5rem',
'3': '0.75rem', '3': '0.75rem',
'4': '1rem', '4': '1rem',
'5': '1.25rem',
'6': '1.5rem', '6': '1.5rem',
'8': '2rem', '8': '2rem',
'10': '2.5rem', '10': '2.5rem',
...@@ -459,8 +479,8 @@ module.exports = { ...@@ -459,8 +479,8 @@ module.exports = {
'4/5': '80%', '4/5': '80%',
'1/6': '16.66667%', '1/6': '16.66667%',
'5/6': '83.33333%', '5/6': '83.33333%',
'full': '100%', full: '100%',
'screen': '100vw' screen: '100vw'
}, },
/* /*
...@@ -479,12 +499,13 @@ module.exports = { ...@@ -479,12 +499,13 @@ module.exports = {
*/ */
height: { height: {
'auto': 'auto', auto: 'auto',
'px': '1px', px: '1px',
'1': '0.25rem', '1': '0.25rem',
'2': '0.5rem', '2': '0.5rem',
'3': '0.75rem', '3': '0.75rem',
'4': '1rem', '4': '1rem',
'5': '1.25rem',
'6': '1.5rem', '6': '1.5rem',
'8': '2rem', '8': '2rem',
'10': '2.5rem', '10': '2.5rem',
...@@ -494,8 +515,8 @@ module.exports = { ...@@ -494,8 +515,8 @@ module.exports = {
'32': '8rem', '32': '8rem',
'48': '12rem', '48': '12rem',
'64': '16rem', '64': '16rem',
'full': '100%', full: '100%',
'screen': '100vh' screen: '100vh'
}, },
/* /*
...@@ -514,7 +535,7 @@ module.exports = { ...@@ -514,7 +535,7 @@ module.exports = {
minWidth: { minWidth: {
'0': '0', '0': '0',
'full': '100%' full: '100%'
}, },
/* /*
...@@ -533,8 +554,8 @@ module.exports = { ...@@ -533,8 +554,8 @@ module.exports = {
minHeight: { minHeight: {
'0': '0', '0': '0',
'full': '100%', full: '100%',
'screen': '100vh' screen: '100vh'
}, },
/* /*
...@@ -553,16 +574,16 @@ module.exports = { ...@@ -553,16 +574,16 @@ module.exports = {
*/ */
maxWidth: { maxWidth: {
'xs': '20rem', xs: '20rem',
'sm': '30rem', sm: '30rem',
'md': '40rem', md: '40rem',
'lg': '50rem', lg: '50rem',
'xl': '60rem', xl: '60rem',
'2xl': '70rem', '2xl': '70rem',
'3xl': '80rem', '3xl': '80rem',
'4xl': '90rem', '4xl': '90rem',
'5xl': '100rem', '5xl': '100rem',
'full': '100%' full: '100%'
}, },
/* /*
...@@ -580,8 +601,8 @@ module.exports = { ...@@ -580,8 +601,8 @@ module.exports = {
*/ */
maxHeight: { maxHeight: {
'full': '100%', full: '100%',
'screen': '100vh' screen: '100vh'
}, },
/* /*
...@@ -600,14 +621,21 @@ module.exports = { ...@@ -600,14 +621,21 @@ module.exports = {
*/ */
padding: { padding: {
'px': '1px', px: '1px',
'0': '0', '0': '0',
'1': '0.25rem', '1': '0.25rem',
'2': '0.5rem', '2': '0.5rem',
'3': '0.75rem', '3': '0.75rem',
'4': '1rem', '4': '1rem',
'5': '1.25rem',
'6': '1.5rem', '6': '1.5rem',
'8': '2rem' '8': '2rem',
'10': '2.5rem',
'12': '3rem',
'16': '4rem',
'20': '5rem',
'24': '6rem',
'32': '8rem'
}, },
/* /*
...@@ -626,15 +654,22 @@ module.exports = { ...@@ -626,15 +654,22 @@ module.exports = {
*/ */
margin: { margin: {
'auto': 'auto', auto: 'auto',
'px': '1px', px: '1px',
'0': '0', '0': '0',
'1': '0.25rem', '1': '0.25rem',
'2': '0.5rem', '2': '0.5rem',
'3': '0.75rem', '3': '0.75rem',
'4': '1rem', '4': '1rem',
'5': '1.25rem',
'6': '1.5rem', '6': '1.5rem',
'8': '2rem' '8': '2rem',
'10': '2.5rem',
'12': '3rem',
'16': '4rem',
'20': '5rem',
'24': '6rem',
'32': '8rem'
}, },
/* /*
...@@ -653,14 +688,21 @@ module.exports = { ...@@ -653,14 +688,21 @@ module.exports = {
*/ */
negativeMargin: { negativeMargin: {
'px': '1px', px: '1px',
'0': '0', '0': '0',
'1': '0.25rem', '1': '0.25rem',
'2': '0.5rem', '2': '0.5rem',
'3': '0.75rem', '3': '0.75rem',
'4': '1rem', '4': '1rem',
'5': '1.25rem',
'6': '1.5rem', '6': '1.5rem',
'8': '2rem' '8': '2rem',
'10': '2.5rem',
'12': '3rem',
'16': '4rem',
'20': '5rem',
'24': '6rem',
'32': '8rem'
}, },
/* /*
...@@ -681,10 +723,11 @@ module.exports = { ...@@ -681,10 +723,11 @@ module.exports = {
shadows: { shadows: {
default: '0 2px 4px 0 rgba(0,0,0,0.10)', default: '0 2px 4px 0 rgba(0,0,0,0.10)',
'md': '0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08)', md: '0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08)',
'lg': '0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08)', lg: '0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08)',
'inner': 'inset 0 2px 4px 0 rgba(0,0,0,0.06)', inner: 'inset 0 2px 4px 0 rgba(0,0,0,0.06)',
'none': 'none' outline: '0 0 0 3px rgba(52,144,220,0.5)',
none: 'none'
}, },
/* /*
...@@ -701,7 +744,7 @@ module.exports = { ...@@ -701,7 +744,7 @@ module.exports = {
*/ */
zIndex: { zIndex: {
'auto': 'auto', auto: 'auto',
'0': 0, '0': 0,
'10': 10, '10': 10,
'20': 20, '20': 20,
...@@ -733,17 +776,144 @@ module.exports = { ...@@ -733,17 +776,144 @@ module.exports = {
/* /*
|----------------------------------------------------------------------------- |-----------------------------------------------------------------------------
| Options https://tailwindcss.com/docs/configuration#options | SVG fill https://tailwindcss.com/docs/svg
|----------------------------------------------------------------------------- |-----------------------------------------------------------------------------
| |
| Here is where you can set your Tailwind configuration options. For more | Here is where you define your SVG fill colors. By default we just provide
| details about these options, visit the configuration options documentation. | `fill-current` which sets the fill to the current text color. This lets you
| specify a fill color using existing text color utilities and helps keep the
| generated CSS file size down.
|
| Class name: .fill-{name}
|
*/
svgFill: {
current: 'currentColor'
},
/*
|-----------------------------------------------------------------------------
| SVG stroke https://tailwindcss.com/docs/svg
|-----------------------------------------------------------------------------
|
| Here is where you define your SVG stroke colors. By default we just provide
| `stroke-current` which sets the stroke to the current text color. This lets
| you specify a stroke color using existing text color utilities and helps
| keep the generated CSS file size down.
|
| Class name: .stroke-{name}
|
*/
svgStroke: {
current: 'currentColor'
},
/*
|-----------------------------------------------------------------------------
| Modules https://tailwindcss.com/docs/configuration#modules
|-----------------------------------------------------------------------------
|
| Here is where you control which modules are generated and what variants are
| generated for each of those modules.
|
| Currently supported variants:
| - responsive
| - hover
| - focus
| - active
| - group-hover
|
| To disable a module completely, use `false` instead of an array.
|
*/
modules: {
appearance: ['responsive'],
backgroundAttachment: ['responsive'],
backgroundColors: ['responsive', 'hover', 'focus'],
backgroundPosition: ['responsive'],
backgroundRepeat: ['responsive'],
backgroundSize: ['responsive'],
borderCollapse: [],
borderColors: ['responsive', 'hover', 'focus'],
borderRadius: ['responsive'],
borderStyle: ['responsive'],
borderWidths: ['responsive'],
cursor: ['responsive'],
display: ['responsive'],
flexbox: ['responsive'],
float: ['responsive'],
fonts: ['responsive'],
fontWeights: ['responsive', 'hover', 'focus'],
height: ['responsive'],
leading: ['responsive'],
lists: ['responsive'],
margin: ['responsive'],
maxHeight: ['responsive'],
maxWidth: ['responsive'],
minHeight: ['responsive'],
minWidth: ['responsive'],
negativeMargin: ['responsive'],
opacity: ['responsive'],
outline: ['focus'],
overflow: ['responsive'],
padding: ['responsive'],
pointerEvents: ['responsive'],
position: ['responsive'],
resize: ['responsive'],
shadows: ['responsive', 'hover', 'focus'],
svgFill: [],
svgStroke: [],
tableLayout: ['responsive'],
textAlign: ['responsive'],
textColors: ['responsive', 'hover', 'focus'],
textSizes: ['responsive'],
textStyle: ['responsive', 'hover', 'focus'],
tracking: ['responsive'],
userSelect: ['responsive'],
verticalAlign: ['responsive'],
visibility: ['responsive'],
whitespace: ['responsive'],
width: ['responsive'],
zIndex: ['responsive']
},
/*
|-----------------------------------------------------------------------------
| Plugins https://tailwindcss.com/docs/plugins
|-----------------------------------------------------------------------------
|
| Here is where you can register any plugins you'd like to use in your
| project. Tailwind's built-in `container` plugin is enabled by default to
| give you a Bootstrap-style responsive container component out of the box.
|
| Be sure to view the complete plugin documentation to learn more about how
| the plugin system works.
|
*/
plugins: [
require('tailwindcss/plugins/container')({
// center: true,
// padding: '1rem',
})
],
/*
|-----------------------------------------------------------------------------
| Advanced Options https://tailwindcss.com/docs/configuration#options
|-----------------------------------------------------------------------------
|
| Here is where you can tweak advanced configuration options. We recommend
| leaving these options alone unless you absolutely need to change them.
| |
*/ */
options: { options: {
prefix: '', prefix: '',
important: false important: false,
separator: ':'
} }
} }
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或