mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
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. 🎉
This commit is contained in:
Jamie Barton
Tim Neutkens
parent
ed2c379fc7
commit
196f71feb7
|
|
@ -1,37 +0,0 @@
|
|||
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
|
||||
|
|
@ -1,58 +1,29 @@
|
|||
import Link from 'next/link'
|
||||
const links = [
|
||||
{ href: 'https://github.com/segmentio/create-next-app', label: 'Github' }
|
||||
].map(link => {
|
||||
link.key = `nav-link-${link.href}-${link.label}`
|
||||
return link
|
||||
})
|
||||
|
||||
const Nav = () => (
|
||||
<nav>
|
||||
<ul>
|
||||
<li>
|
||||
const links = [
|
||||
{ href: 'https://github.com/zeit/next.js', label: 'Github' },
|
||||
{ href: 'https://nextjs.org/docs', label: 'Docs' }
|
||||
]
|
||||
|
||||
export default function Nav () {
|
||||
return <nav>
|
||||
<ul className='flex justify-between items-center p-8'>
|
||||
<li className='list-reset'>
|
||||
<Link prefetch href='/'>
|
||||
<a>Home</a>
|
||||
<a className='text-blue no-underline'>Home</a>
|
||||
</Link>
|
||||
</li>
|
||||
<ul>
|
||||
<ul className='flex justify-between items-center'>
|
||||
{links.map(
|
||||
({ key, href, label }) => (
|
||||
<li key={key}>
|
||||
({ href, label }) => (
|
||||
<li key={`${href}${label}`} className='list-reset ml-4'>
|
||||
<Link href={href}>
|
||||
<a className='btn-blue'>{label}</a>
|
||||
<a className='btn-blue no-underline'>{label}</a>
|
||||
</Link>
|
||||
</li>
|
||||
)
|
||||
)}
|
||||
</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>
|
||||
)
|
||||
|
||||
export default Nav
|
||||
}
|
||||
|
|
|
|||
3
examples/with-tailwindcss/next.config.js
Normal file
3
examples/with-tailwindcss/next.config.js
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
const withCSS = require('@zeit/next-css')
|
||||
|
||||
module.exports = withCSS({})
|
||||
|
|
@ -2,13 +2,12 @@
|
|||
"name": "with-tailwindcss",
|
||||
"version": "1.0.0",
|
||||
"scripts": {
|
||||
"dev": "next & yarn dev:css",
|
||||
"dev:css": "postcss styles/index.css --watch -c styles/config/postcss.config.js -o static/css/bundle.css",
|
||||
"build": "next build & yarn build:css",
|
||||
"build:css": "postcss styles/index.css -c styles/config/postcss.config.js -o static/css/bundle.css",
|
||||
"dev": "next",
|
||||
"build": "next build",
|
||||
"start": "next start"
|
||||
},
|
||||
"dependencies": {
|
||||
"@zeit/next-css": "^1.0.1",
|
||||
"next": "latest",
|
||||
"react": "^16.0.0",
|
||||
"react-dom": "^16.0.0"
|
||||
|
|
@ -16,8 +15,7 @@
|
|||
"devDependencies": {
|
||||
"autoprefixer": "^7.1.6",
|
||||
"cssnano": "^3.10.0",
|
||||
"postcss-cli": "^4.1.1",
|
||||
"postcss-easy-import": "^3.0.0",
|
||||
"tailwindcss": "^0.2.2"
|
||||
"tailwindcss": "^0.6.6"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
16
examples/with-tailwindcss/pages/_app.js
Normal file
16
examples/with-tailwindcss/pages/_app.js
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
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>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
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
|
||||
|
|
@ -1,9 +1,7 @@
|
|||
import Head from '../components/head'
|
||||
import Nav from '../components/nav'
|
||||
|
||||
export default () => (
|
||||
<div>
|
||||
<Head title='Home' />
|
||||
<Nav />
|
||||
<div className='hero'>
|
||||
<h1 className='title'>Next.js + Tailwind css</h1>
|
||||
|
|
|
|||
|
|
@ -3,8 +3,7 @@ var tailwindcss = require('tailwindcss')
|
|||
module.exports = {
|
||||
plugins: [
|
||||
require('postcss-easy-import'),
|
||||
tailwindcss('./styles/config/tailwind.config.js'),
|
||||
require('autoprefixer'),
|
||||
require('cssnano')
|
||||
tailwindcss('./tailwind.config.js'),
|
||||
require('autoprefixer')
|
||||
]
|
||||
}
|
||||
|
|
@ -19,37 +19,3 @@
|
|||
.title, .description {
|
||||
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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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.
|
|||
|
|
||||
*/
|
||||
|
||||
var colors = {
|
||||
'transparent': 'transparent',
|
||||
let colors = {
|
||||
transparent: 'transparent',
|
||||
|
||||
'black': '#222b2f',
|
||||
'grey-darkest': '#364349',
|
||||
'grey-darker': '#596a73',
|
||||
'grey-dark': '#70818a',
|
||||
'grey': '#9babb4',
|
||||
'grey-light': '#dae4e9',
|
||||
'grey-lighter': '#f3f7f9',
|
||||
'grey-lightest': '#fafcfc',
|
||||
'white': '#ffffff',
|
||||
black: '#22292f',
|
||||
'grey-darkest': '#3d4852',
|
||||
'grey-darker': '#606f7b',
|
||||
'grey-dark': '#8795a1',
|
||||
grey: '#b8c2cc',
|
||||
'grey-light': '#dae1e7',
|
||||
'grey-lighter': '#f1f5f8',
|
||||
'grey-lightest': '#f8fafc',
|
||||
white: '#ffffff',
|
||||
|
||||
'red-darkest': '#420806',
|
||||
'red-darker': '#6a1b19',
|
||||
'red-darkest': '#3b0d0c',
|
||||
'red-darker': '#621b18',
|
||||
'red-dark': '#cc1f1a',
|
||||
'red': '#e3342f',
|
||||
red: '#e3342f',
|
||||
'red-light': '#ef5753',
|
||||
'red-lighter': '#f9acaa',
|
||||
'red-lightest': '#fcebea',
|
||||
|
||||
'orange-darkest': '#542605',
|
||||
'orange-darker': '#7f4012',
|
||||
'orange-darkest': '#462a16',
|
||||
'orange-darker': '#613b1f',
|
||||
'orange-dark': '#de751f',
|
||||
'orange': '#f6993f',
|
||||
orange: '#f6993f',
|
||||
'orange-light': '#faad63',
|
||||
'orange-lighter': '#fcd9b6',
|
||||
'orange-lightest': '#fff5eb',
|
||||
|
|
@ -73,31 +73,31 @@ var colors = {
|
|||
'yellow-darkest': '#453411',
|
||||
'yellow-darker': '#684f1d',
|
||||
'yellow-dark': '#f2d024',
|
||||
'yellow': '#ffed4a',
|
||||
yellow: '#ffed4a',
|
||||
'yellow-light': '#fff382',
|
||||
'yellow-lighter': '#fff9c2',
|
||||
'yellow-lightest': '#fcfbeb',
|
||||
|
||||
'green-darkest': '#032d19',
|
||||
'green-darker': '#0b4228',
|
||||
'green-darkest': '#0f2f21',
|
||||
'green-darker': '#1a4731',
|
||||
'green-dark': '#1f9d55',
|
||||
'green': '#38c172',
|
||||
green: '#38c172',
|
||||
'green-light': '#51d88a',
|
||||
'green-lighter': '#a2f5bf',
|
||||
'green-lightest': '#e3fcec',
|
||||
|
||||
'teal-darkest': '#0d3331',
|
||||
'teal-darker': '#174e4b',
|
||||
'teal-darker': '#20504f',
|
||||
'teal-dark': '#38a89d',
|
||||
'teal': '#4dc0b5',
|
||||
teal: '#4dc0b5',
|
||||
'teal-light': '#64d5ca',
|
||||
'teal-lighter': '#a0f0ed',
|
||||
'teal-lightest': '#e8fffe',
|
||||
|
||||
'blue-darkest': '#05233b',
|
||||
'blue-darker': '#103d60',
|
||||
'blue-darkest': '#12283a',
|
||||
'blue-darker': '#1c3d5a',
|
||||
'blue-dark': '#2779bd',
|
||||
'blue': '#3490dc',
|
||||
blue: '#3490dc',
|
||||
'blue-light': '#6cb2eb',
|
||||
'blue-lighter': '#bcdefa',
|
||||
'blue-lightest': '#eff8ff',
|
||||
|
|
@ -105,30 +105,29 @@ var colors = {
|
|||
'indigo-darkest': '#191e38',
|
||||
'indigo-darker': '#2f365f',
|
||||
'indigo-dark': '#5661b3',
|
||||
'indigo': '#6574cd',
|
||||
indigo: '#6574cd',
|
||||
'indigo-light': '#7886d7',
|
||||
'indigo-lighter': '#b2b7ff',
|
||||
'indigo-lightest': '#e6e8ff',
|
||||
|
||||
'purple-darkest': '#1f133f',
|
||||
'purple-darker': '#352465',
|
||||
'purple-darkest': '#21183c',
|
||||
'purple-darker': '#382b5f',
|
||||
'purple-dark': '#794acf',
|
||||
'purple': '#9561e2',
|
||||
purple: '#9561e2',
|
||||
'purple-light': '#a779e9',
|
||||
'purple-lighter': '#d6bbfc',
|
||||
'purple-lightest': '#f3ebff',
|
||||
|
||||
'pink-darkest': '#45051e',
|
||||
'pink-darker': '#72173a',
|
||||
'pink-darkest': '#451225',
|
||||
'pink-darker': '#6f213f',
|
||||
'pink-dark': '#eb5286',
|
||||
'pink': '#f66d9b',
|
||||
pink: '#f66d9b',
|
||||
'pink-light': '#fa7ea8',
|
||||
'pink-lighter': '#ffbbca',
|
||||
'pink-lightest': '#ffebef'
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
|
||||
/*
|
||||
|-----------------------------------------------------------------------------
|
||||
| Colors https://tailwindcss.com/docs/colors
|
||||
|
|
@ -164,10 +163,10 @@ module.exports = {
|
|||
*/
|
||||
|
||||
screens: {
|
||||
'sm': '576px',
|
||||
'md': '768px',
|
||||
'lg': '992px',
|
||||
'xl': '1200px'
|
||||
sm: '576px',
|
||||
md: '768px',
|
||||
lg: '992px',
|
||||
xl: '1200px'
|
||||
},
|
||||
|
||||
/*
|
||||
|
|
@ -189,9 +188,10 @@ module.exports = {
|
|||
*/
|
||||
|
||||
fonts: {
|
||||
'sans': [
|
||||
'-apple-system',
|
||||
sans: [
|
||||
'system-ui',
|
||||
'BlinkMacSystemFont',
|
||||
'-apple-system',
|
||||
'Segoe UI',
|
||||
'Roboto',
|
||||
'Oxygen',
|
||||
|
|
@ -202,7 +202,7 @@ module.exports = {
|
|||
'Helvetica Neue',
|
||||
'sans-serif'
|
||||
],
|
||||
'serif': [
|
||||
serif: [
|
||||
'Constantia',
|
||||
'Lucida Bright',
|
||||
'Lucidabright',
|
||||
|
|
@ -214,7 +214,7 @@ module.exports = {
|
|||
'Georgia',
|
||||
'serif'
|
||||
],
|
||||
'mono': [
|
||||
mono: [
|
||||
'Menlo',
|
||||
'Monaco',
|
||||
'Consolas',
|
||||
|
|
@ -244,11 +244,11 @@ module.exports = {
|
|||
*/
|
||||
|
||||
textSizes: {
|
||||
'xs': '.75rem', // 12px
|
||||
'sm': '.875rem', // 14px
|
||||
'base': '1rem', // 16px
|
||||
'lg': '1.125rem', // 18px
|
||||
'xl': '1.25rem', // 20px
|
||||
xs: '.75rem', // 12px
|
||||
sm: '.875rem', // 14px
|
||||
base: '1rem', // 16px
|
||||
lg: '1.125rem', // 18px
|
||||
xl: '1.25rem', // 20px
|
||||
'2xl': '1.5rem', // 24px
|
||||
'3xl': '1.875rem', // 30px
|
||||
'4xl': '2.25rem', // 36px
|
||||
|
|
@ -270,15 +270,15 @@ module.exports = {
|
|||
*/
|
||||
|
||||
fontWeights: {
|
||||
'hairline': 100,
|
||||
'thin': 200,
|
||||
'light': 300,
|
||||
'normal': 400,
|
||||
'medium': 500,
|
||||
'semibold': 600,
|
||||
'bold': 700,
|
||||
'extrabold': 800,
|
||||
'black': 900
|
||||
hairline: 100,
|
||||
thin: 200,
|
||||
light: 300,
|
||||
normal: 400,
|
||||
medium: 500,
|
||||
semibold: 600,
|
||||
bold: 700,
|
||||
extrabold: 800,
|
||||
black: 900
|
||||
},
|
||||
|
||||
/*
|
||||
|
|
@ -294,10 +294,10 @@ module.exports = {
|
|||
*/
|
||||
|
||||
leading: {
|
||||
'none': 1,
|
||||
'tight': 1.25,
|
||||
'normal': 1.5,
|
||||
'loose': 2
|
||||
none: 1,
|
||||
tight: 1.25,
|
||||
normal: 1.5,
|
||||
loose: 2
|
||||
},
|
||||
|
||||
/*
|
||||
|
|
@ -313,9 +313,9 @@ module.exports = {
|
|||
*/
|
||||
|
||||
tracking: {
|
||||
'tight': '-0.05em',
|
||||
'normal': '0',
|
||||
'wide': '0.05em'
|
||||
tight: '-0.05em',
|
||||
normal: '0',
|
||||
wide: '0.05em'
|
||||
},
|
||||
|
||||
/*
|
||||
|
|
@ -348,6 +348,25 @@ module.exports = {
|
|||
|
||||
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
|
||||
|
|
@ -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 = {
|
|||
*/
|
||||
|
||||
borderRadius: {
|
||||
'none': '0',
|
||||
'sm': '.125rem',
|
||||
none: '0',
|
||||
sm: '.125rem',
|
||||
default: '.25rem',
|
||||
'lg': '.5rem',
|
||||
'full': '9999px'
|
||||
lg: '.5rem',
|
||||
full: '9999px'
|
||||
},
|
||||
|
||||
/*
|
||||
|
|
@ -433,12 +452,13 @@ module.exports = {
|
|||
*/
|
||||
|
||||
width: {
|
||||
'auto': 'auto',
|
||||
'px': '1px',
|
||||
auto: 'auto',
|
||||
px: '1px',
|
||||
'1': '0.25rem',
|
||||
'2': '0.5rem',
|
||||
'3': '0.75rem',
|
||||
'4': '1rem',
|
||||
'5': '1.25rem',
|
||||
'6': '1.5rem',
|
||||
'8': '2rem',
|
||||
'10': '2.5rem',
|
||||
|
|
@ -459,8 +479,8 @@ module.exports = {
|
|||
'4/5': '80%',
|
||||
'1/6': '16.66667%',
|
||||
'5/6': '83.33333%',
|
||||
'full': '100%',
|
||||
'screen': '100vw'
|
||||
full: '100%',
|
||||
screen: '100vw'
|
||||
},
|
||||
|
||||
/*
|
||||
|
|
@ -479,12 +499,13 @@ module.exports = {
|
|||
*/
|
||||
|
||||
height: {
|
||||
'auto': 'auto',
|
||||
'px': '1px',
|
||||
auto: 'auto',
|
||||
px: '1px',
|
||||
'1': '0.25rem',
|
||||
'2': '0.5rem',
|
||||
'3': '0.75rem',
|
||||
'4': '1rem',
|
||||
'5': '1.25rem',
|
||||
'6': '1.5rem',
|
||||
'8': '2rem',
|
||||
'10': '2.5rem',
|
||||
|
|
@ -494,8 +515,8 @@ module.exports = {
|
|||
'32': '8rem',
|
||||
'48': '12rem',
|
||||
'64': '16rem',
|
||||
'full': '100%',
|
||||
'screen': '100vh'
|
||||
full: '100%',
|
||||
screen: '100vh'
|
||||
},
|
||||
|
||||
/*
|
||||
|
|
@ -514,7 +535,7 @@ module.exports = {
|
|||
|
||||
minWidth: {
|
||||
'0': '0',
|
||||
'full': '100%'
|
||||
full: '100%'
|
||||
},
|
||||
|
||||
/*
|
||||
|
|
@ -533,8 +554,8 @@ module.exports = {
|
|||
|
||||
minHeight: {
|
||||
'0': '0',
|
||||
'full': '100%',
|
||||
'screen': '100vh'
|
||||
full: '100%',
|
||||
screen: '100vh'
|
||||
},
|
||||
|
||||
/*
|
||||
|
|
@ -553,16 +574,16 @@ module.exports = {
|
|||
*/
|
||||
|
||||
maxWidth: {
|
||||
'xs': '20rem',
|
||||
'sm': '30rem',
|
||||
'md': '40rem',
|
||||
'lg': '50rem',
|
||||
'xl': '60rem',
|
||||
xs: '20rem',
|
||||
sm: '30rem',
|
||||
md: '40rem',
|
||||
lg: '50rem',
|
||||
xl: '60rem',
|
||||
'2xl': '70rem',
|
||||
'3xl': '80rem',
|
||||
'4xl': '90rem',
|
||||
'5xl': '100rem',
|
||||
'full': '100%'
|
||||
full: '100%'
|
||||
},
|
||||
|
||||
/*
|
||||
|
|
@ -580,8 +601,8 @@ module.exports = {
|
|||
*/
|
||||
|
||||
maxHeight: {
|
||||
'full': '100%',
|
||||
'screen': '100vh'
|
||||
full: '100%',
|
||||
screen: '100vh'
|
||||
},
|
||||
|
||||
/*
|
||||
|
|
@ -600,14 +621,21 @@ module.exports = {
|
|||
*/
|
||||
|
||||
padding: {
|
||||
'px': '1px',
|
||||
px: '1px',
|
||||
'0': '0',
|
||||
'1': '0.25rem',
|
||||
'2': '0.5rem',
|
||||
'3': '0.75rem',
|
||||
'4': '1rem',
|
||||
'5': '1.25rem',
|
||||
'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 = {
|
|||
*/
|
||||
|
||||
margin: {
|
||||
'auto': 'auto',
|
||||
'px': '1px',
|
||||
auto: 'auto',
|
||||
px: '1px',
|
||||
'0': '0',
|
||||
'1': '0.25rem',
|
||||
'2': '0.5rem',
|
||||
'3': '0.75rem',
|
||||
'4': '1rem',
|
||||
'5': '1.25rem',
|
||||
'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 = {
|
|||
*/
|
||||
|
||||
negativeMargin: {
|
||||
'px': '1px',
|
||||
px: '1px',
|
||||
'0': '0',
|
||||
'1': '0.25rem',
|
||||
'2': '0.5rem',
|
||||
'3': '0.75rem',
|
||||
'4': '1rem',
|
||||
'5': '1.25rem',
|
||||
'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 = {
|
|||
|
||||
shadows: {
|
||||
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)',
|
||||
'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)',
|
||||
'none': 'none'
|
||||
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)',
|
||||
inner: 'inset 0 2px 4px 0 rgba(0,0,0,0.06)',
|
||||
outline: '0 0 0 3px rgba(52,144,220,0.5)',
|
||||
none: 'none'
|
||||
},
|
||||
|
||||
/*
|
||||
|
|
@ -701,7 +744,7 @@ module.exports = {
|
|||
*/
|
||||
|
||||
zIndex: {
|
||||
'auto': 'auto',
|
||||
auto: 'auto',
|
||||
'0': 0,
|
||||
'10': 10,
|
||||
'20': 20,
|
||||
|
|
@ -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
|
||||
| details about these options, visit the configuration options documentation.
|
||||
| Here is where you define your SVG fill colors. By default we just provide
|
||||
| `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: {
|
||||
prefix: '',
|
||||
important: false
|
||||
important: false,
|
||||
separator: ':'
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
Reference in a new issue