From fc335ac36c790eae7432f74417bc3c759008ff5e Mon Sep 17 00:00:00 2001 From: Lucas Rosa Date: Thu, 23 Nov 2017 07:48:34 -0500 Subject: [PATCH] Add example with tailwind css (#3317) * Add Tailwind css example * Fix read me * Add create-next-app setup to read me --- examples/with-tailwindcss/README.md | 68 ++ examples/with-tailwindcss/components/head.js | 37 + examples/with-tailwindcss/components/nav.js | 60 ++ examples/with-tailwindcss/package.json | 23 + examples/with-tailwindcss/pages/_document.js | 26 + examples/with-tailwindcss/pages/index.js | 13 + examples/with-tailwindcss/styles/button.css | 3 + .../styles/config/postcss.config.js | 10 + .../styles/config/tailwind.config.js | 775 ++++++++++++++++++ examples/with-tailwindcss/styles/index.css | 55 ++ 10 files changed, 1070 insertions(+) create mode 100644 examples/with-tailwindcss/README.md create mode 100644 examples/with-tailwindcss/components/head.js create mode 100644 examples/with-tailwindcss/components/nav.js create mode 100644 examples/with-tailwindcss/package.json create mode 100644 examples/with-tailwindcss/pages/_document.js create mode 100644 examples/with-tailwindcss/pages/index.js create mode 100644 examples/with-tailwindcss/styles/button.css create mode 100644 examples/with-tailwindcss/styles/config/postcss.config.js create mode 100644 examples/with-tailwindcss/styles/config/tailwind.config.js create mode 100644 examples/with-tailwindcss/styles/index.css diff --git a/examples/with-tailwindcss/README.md b/examples/with-tailwindcss/README.md new file mode 100644 index 00000000..c20bc170 --- /dev/null +++ b/examples/with-tailwindcss/README.md @@ -0,0 +1,68 @@ +[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-tailwindcss) + +# Tailwind CSS example + +This is an example of how you can include a global stylesheet in a next.js webapp. + +## How to use + +If you like [create-next-app](https://github.com/segmentio/create-next-app) and/or [yarn](https://yarnpkg.com/en/docs/cli/create) simply run: + +```bash +yarn create next-app --example with-tailwindcss my-app +cd my-app +``` + +*Otherwise:* + +Download the example [or clone the repo](https://github.com/zeit/next.js): + +```bash +curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-tailwindcss +cd with-tailwindcss +``` + +**Running** + +To get this example running you just need to + + yarn install . + yarn dev + +Visit [http://localhost:3000](http://localhost:3000) and try to modify `styles/index.css`. + +Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)) + +```bash +now +``` + +### Extras + +In the `package.json` you'll see some extra commands. + +* `yarn dev:css` + * used by `yarn dev` generate css bundle and watch css files for changes + * includes css imported into `index.css` + * will **not** autoreload browser when css changes +* `yarn build:css` + * used by `yarn build` to generate css bundle + +These can be used manually but using the usual commands will run them anyways. + +## The idea behind the example + +This setup is a basic starting point for using tailwind css and next. Along with tailwind, this example +also uses some other postcss plugins for imports, autoprefixing, and stripping whitespace/comments. The imports simply +allow for an easy way to split up css files but still get one bundled css file in `static/css/bundle.css`. +Changing stylesheets does not trigger auto-reloads. Setting up auto-reloads was avoided +because the next.js read me does not recommend doing so. Although, that can easily be done with +some webpack loaders. If you are curious about using loaders with next look at this +[example](https://github.com/zeit/next.js/tree/canary/examples/with-global-stylesheet). + +This project shows how you can set it up. Have a look at: +* pages/_document.js +* styles/config/postcss.config.js +* styles/config/tailwind.config.js +* styles/index.css +* styles/button.css diff --git a/examples/with-tailwindcss/components/head.js b/examples/with-tailwindcss/components/head.js new file mode 100644 index 00000000..aea67fa2 --- /dev/null +++ b/examples/with-tailwindcss/components/head.js @@ -0,0 +1,37 @@ +import NextHead from 'next/head' +import { string } from 'prop-types' + +const defaultDescription = '' +const defaultOGURL = '' +const defaultOGImage = '' + +const Head = (props) => ( + + + {props.title || ''} + + + + + + + + + + + + + + + + +) + +Head.propTypes = { + title: string, + description: string, + url: string, + ogImage: string +} + +export default Head diff --git a/examples/with-tailwindcss/components/nav.js b/examples/with-tailwindcss/components/nav.js new file mode 100644 index 00000000..d089475f --- /dev/null +++ b/examples/with-tailwindcss/components/nav.js @@ -0,0 +1,60 @@ +import Head from './head' +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 = () => ( + +) + +export default Nav diff --git a/examples/with-tailwindcss/package.json b/examples/with-tailwindcss/package.json new file mode 100644 index 00000000..93d7d74b --- /dev/null +++ b/examples/with-tailwindcss/package.json @@ -0,0 +1,23 @@ +{ + "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", + "start": "next start" + }, + "dependencies": { + "next": "^4.1.3", + "react": "^16.0.0", + "react-dom": "^16.0.0" + }, + "devDependencies": { + "autoprefixer": "^7.1.6", + "cssnano": "^3.10.0", + "postcss-cli": "^4.1.1", + "postcss-easy-import": "^3.0.0", + "tailwindcss": "^0.2.2" + } +} diff --git a/examples/with-tailwindcss/pages/_document.js b/examples/with-tailwindcss/pages/_document.js new file mode 100644 index 00000000..13150ab3 --- /dev/null +++ b/examples/with-tailwindcss/pages/_document.js @@ -0,0 +1,26 @@ +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 ( + + + + + + {this.props.customValue} +
+ + + + ) + } +} + +export default MyDocument; diff --git a/examples/with-tailwindcss/pages/index.js b/examples/with-tailwindcss/pages/index.js new file mode 100644 index 00000000..9a488c3a --- /dev/null +++ b/examples/with-tailwindcss/pages/index.js @@ -0,0 +1,13 @@ +import Link from 'next/link' +import Head from '../components/head' +import Nav from '../components/nav' + +export default () => ( +
+ +
+) diff --git a/examples/with-tailwindcss/styles/button.css b/examples/with-tailwindcss/styles/button.css new file mode 100644 index 00000000..33edf0bb --- /dev/null +++ b/examples/with-tailwindcss/styles/button.css @@ -0,0 +1,3 @@ +.btn-blue { + @apply .bg-blue .text-white .font-bold .py-2 .px-4 .rounded; +} diff --git a/examples/with-tailwindcss/styles/config/postcss.config.js b/examples/with-tailwindcss/styles/config/postcss.config.js new file mode 100644 index 00000000..e5bffd93 --- /dev/null +++ b/examples/with-tailwindcss/styles/config/postcss.config.js @@ -0,0 +1,10 @@ +var tailwindcss = require('tailwindcss'); + +module.exports = { + plugins: [ + require('postcss-easy-import'), + tailwindcss('./styles/config/tailwind.config.js'), + require('autoprefixer'), + require('cssnano'), + ] +} diff --git a/examples/with-tailwindcss/styles/config/tailwind.config.js b/examples/with-tailwindcss/styles/config/tailwind.config.js new file mode 100644 index 00000000..78ad7c59 --- /dev/null +++ b/examples/with-tailwindcss/styles/config/tailwind.config.js @@ -0,0 +1,775 @@ +/* + +Tailwind - The Utility-First CSS Framework + +A project by Adam Wathan (@adamwathan), Jonathan Reinink (@reinink), +David Hemphill (@davidhemphill) and Steve Schoger (@steveschoger). + +Welcome to the Tailwind config file. This is where you can customize +Tailwind specifically for your project. Don't be intimidated by the +length of this file. It's really just a big JavaScript object and +we've done our very best to explain each section. + +View the full documentation at https://tailwindcss.com. + + +|------------------------------------------------------------------------------- +| The default config +|------------------------------------------------------------------------------- +| +| This variable contains the default Tailwind config. You don't have +| to use it, but it can sometimes be helpful to have available. For +| example, you may choose to merge your custom configuration +| values with some of the Tailwind defaults. +| +*/ + +var defaultConfig = require('tailwindcss/defaultConfig')() + + +/* +|------------------------------------------------------------------------------- +| Colors https://tailwindcss.com/docs/colors +|------------------------------------------------------------------------------- +| +| Here you can specify the colors used in your project. To get you started, +| we've provided a generous palette of great looking colors that are perfect +| for prototyping, but don't hesitate to change them for your project. You +| own these colors, nothing will break if you change everything about them. +| +| We've used literal color names ("red", "blue", etc.) for the default +| palette, but if you'd rather use functional names like "primary" and +| "secondary", or even a numeric scale like "100" and "200", go for it. +| +*/ + +var 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', + + 'red-darkest': '#420806', + 'red-darker': '#6a1b19', + 'red-dark': '#cc1f1a', + 'red': '#e3342f', + 'red-light': '#ef5753', + 'red-lighter': '#f9acaa', + 'red-lightest': '#fcebea', + + 'orange-darkest': '#542605', + 'orange-darker': '#7f4012', + 'orange-dark': '#de751f', + 'orange': '#f6993f', + 'orange-light': '#faad63', + 'orange-lighter': '#fcd9b6', + 'orange-lightest': '#fff5eb', + + 'yellow-darkest': '#453411', + 'yellow-darker': '#684f1d', + 'yellow-dark': '#f2d024', + 'yellow': '#ffed4a', + 'yellow-light': '#fff382', + 'yellow-lighter': '#fff9c2', + 'yellow-lightest': '#fcfbeb', + + 'green-darkest': '#032d19', + 'green-darker': '#0b4228', + 'green-dark': '#1f9d55', + 'green': '#38c172', + 'green-light': '#51d88a', + 'green-lighter': '#a2f5bf', + 'green-lightest': '#e3fcec', + + 'teal-darkest': '#0d3331', + 'teal-darker': '#174e4b', + 'teal-dark': '#38a89d', + 'teal': '#4dc0b5', + 'teal-light': '#64d5ca', + 'teal-lighter': '#a0f0ed', + 'teal-lightest': '#e8fffe', + + 'blue-darkest': '#05233b', + 'blue-darker': '#103d60', + 'blue-dark': '#2779bd', + 'blue': '#3490dc', + 'blue-light': '#6cb2eb', + 'blue-lighter': '#bcdefa', + 'blue-lightest': '#eff8ff', + + 'indigo-darkest': '#191e38', + 'indigo-darker': '#2f365f', + 'indigo-dark': '#5661b3', + 'indigo': '#6574cd', + 'indigo-light': '#7886d7', + 'indigo-lighter': '#b2b7ff', + 'indigo-lightest': '#e6e8ff', + + 'purple-darkest': '#1f133f', + 'purple-darker': '#352465', + 'purple-dark': '#794acf', + 'purple': '#9561e2', + 'purple-light': '#a779e9', + 'purple-lighter': '#d6bbfc', + 'purple-lightest': '#f3ebff', + + 'pink-darkest': '#45051e', + 'pink-darker': '#72173a', + 'pink-dark': '#eb5286', + 'pink': '#f66d9b', + 'pink-light': '#fa7ea8', + 'pink-lighter': '#ffbbca', + 'pink-lightest': '#ffebef', +} + +module.exports = { + + /* + |----------------------------------------------------------------------------- + | Colors https://tailwindcss.com/docs/colors + |----------------------------------------------------------------------------- + | + | The color palette defined above is also assigned to the "colors" key of + | your Tailwind config. This makes it easy to access them in your CSS + | using Tailwind's config helper. For example: + | + | .error { color: config('colors.red') } + | + */ + + colors: colors, + + + /* + |----------------------------------------------------------------------------- + | Screens https://tailwindcss.com/docs/responsive-design + |----------------------------------------------------------------------------- + | + | Screens in Tailwind are translated to CSS media queries. They define the + | responsive breakpoints for your project. By default Tailwind takes a + | "mobile first" approach, where each screen size represents a minimum + | viewport width. Feel free to have as few or as many screens as you + | want, naming them in whatever way you'd prefer for your project. + | + | Tailwind also allows for more complex screen definitions, which can be + | useful in certain situations. Be sure to see the full responsive + | documentation for a complete list of options. + | + | Class name: .{screen}:{utility} + | + */ + + screens: { + 'sm': '576px', + 'md': '768px', + 'lg': '992px', + 'xl': '1200px', + }, + + + /* + |----------------------------------------------------------------------------- + | Fonts https://tailwindcss.com/docs/fonts + |----------------------------------------------------------------------------- + | + | Here is where you define your project's font stack, or font families. + | Keep in mind that Tailwind doesn't actually load any fonts for you. + | If you're using custom fonts you'll need to import them prior to + | defining them here. + | + | By default we provide a native font stack that works remarkably well on + | any device or OS you're using, since it just uses the default fonts + | provided by the platform. + | + | Class name: .font-{name} + | + */ + + fonts: { + 'sans': [ + '-apple-system', + 'BlinkMacSystemFont', + 'Segoe UI', + 'Roboto', + 'Oxygen', + 'Ubuntu', + 'Cantarell', + 'Fira Sans', + 'Droid Sans', + 'Helvetica Neue', + 'sans-serif', + ], + 'serif': [ + 'Constantia', + 'Lucida Bright', + 'Lucidabright', + 'Lucida Serif', + 'Lucida', + 'DejaVu Serif', + 'Bitstream Vera Serif', + 'Liberation Serif', + 'Georgia', + 'serif', + ], + 'mono': [ + 'Menlo', + 'Monaco', + 'Consolas', + 'Liberation Mono', + 'Courier New', + 'monospace', + ] + }, + + + /* + |----------------------------------------------------------------------------- + | Text sizes https://tailwindcss.com/docs/text-sizing + |----------------------------------------------------------------------------- + | + | Here is where you define your text sizes. Name these in whatever way + | makes the most sense to you. We use size names by default, but + | you're welcome to use a numeric scale or even something else + | entirely. + | + | By default Tailwind uses the "rem" unit type for most measurements. + | This allows you to set a root font size which all other sizes are + | then based on. That said, you are free to use whatever units you + | prefer, be it rems, ems, pixels or other. + | + | Class name: .text-{size} + | + */ + + textSizes: { + '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 + '5xl': '3rem', // 48px + }, + + + /* + |----------------------------------------------------------------------------- + | Font weights https://tailwindcss.com/docs/font-weight + |----------------------------------------------------------------------------- + | + | Here is where you define your font weights. We've provided a list of + | common font weight names with their respective numeric scale values + | to get you started. It's unlikely that your project will require + | all of these, so we recommend removing those you don't need. + | + | Class name: .font-{weight} + | + */ + + fontWeights: { + 'hairline': 100, + 'thin': 200, + 'light': 300, + 'normal': 400, + 'medium': 500, + 'semibold': 600, + 'bold': 700, + 'extrabold': 800, + 'black': 900, + }, + + + /* + |----------------------------------------------------------------------------- + | Leading (line height) https://tailwindcss.com/docs/line-height + |----------------------------------------------------------------------------- + | + | Here is where you define your line height values, or as we call + | them in Tailwind, leadings. + | + | Class name: .leading-{size} + | + */ + + leading: { + 'none': 1, + 'tight': 1.25, + 'normal': 1.5, + 'loose': 2, + }, + + + /* + |----------------------------------------------------------------------------- + | Tracking (letter spacing) https://tailwindcss.com/docs/letter-spacing + |----------------------------------------------------------------------------- + | + | Here is where you define your letter spacing values, or as we call + | them in Tailwind, tracking. + | + | Class name: .tracking-{size} + | + */ + + tracking: { + 'tight': '-0.05em', + 'normal': '0', + 'wide': '0.05em', + }, + + + /* + |----------------------------------------------------------------------------- + | Text colors https://tailwindcss.com/docs/text-color + |----------------------------------------------------------------------------- + | + | Here is where you define your text colors. By default these use the + | color palette we defined above, however you're welcome to set these + | independently if that makes sense for your project. + | + | Class name: .text-{color} + | + */ + + textColors: colors, + + + /* + |----------------------------------------------------------------------------- + | Background colors https://tailwindcss.com/docs/background-color + |----------------------------------------------------------------------------- + | + | Here is where you define your background colors. By default these use + | the color palette we defined above, however you're welcome to set + | these independently if that makes sense for your project. + | + | Class name: .bg-{color} + | + */ + + backgroundColors: colors, + + + /* + |----------------------------------------------------------------------------- + | Border widths https://tailwindcss.com/docs/border-width + |----------------------------------------------------------------------------- + | + | Here is where you define your border widths. Take note that border + | widths require a special "default" value set as well. This is the + | width that will be used when you do not specify a border width. + | + | Class name: .border{-side?}{-width?} + | + */ + + borderWidths: { + default: '1px', + '0': '0', + '2': '2px', + '4': '4px', + '8': '8px', + }, + + + /* + |----------------------------------------------------------------------------- + | Border colors https://tailwindcss.com/docs/border-color + |----------------------------------------------------------------------------- + | + | Here is where you define your border colors. By default these use the + | color palette we defined above, however you're welcome to set these + | independently if that makes sense for your project. + | + | Take note that border colors require a special "default" value set + | as well. This is the color that will be used when you do not + | specify a border color. + | + | Class name: .border-{color} + | + */ + + borderColors: Object.assign({ default: colors['grey-light'] }, colors), + + + /* + |----------------------------------------------------------------------------- + | Border radius https://tailwindcss.com/docs/border-radius + |----------------------------------------------------------------------------- + | + | Here is where you define your border radius values. If a `default` radius + | is provided, it will be made available as the non-suffixed `.rounded` + | utility. + | + | If your scale includes a `0` value to reset already rounded corners, it's + | a good idea to put it first so other values are able to override it. + | + | Class name: .rounded{-side?}{-size?} + | + */ + + borderRadius: { + 'none': '0', + 'sm': '.125rem', + default: '.25rem', + 'lg': '.5rem', + 'full': '9999px', + }, + + + /* + |----------------------------------------------------------------------------- + | Width https://tailwindcss.com/docs/width + |----------------------------------------------------------------------------- + | + | Here is where you define your width utility sizes. These can be + | percentage based, pixels, rems, or any other units. By default + | we provide a sensible rem based numeric scale, a percentage + | based fraction scale, plus some other common use-cases. You + | can, of course, modify these values as needed. + | + | + | It's also worth mentioning that Tailwind automatically escapes + | invalid CSS class name characters, which allows you to have + | awesome classes like .w-2/3. + | + | Class name: .w-{size} + | + */ + + width: { + 'auto': 'auto', + 'px': '1px', + '1': '0.25rem', + '2': '0.5rem', + '3': '0.75rem', + '4': '1rem', + '6': '1.5rem', + '8': '2rem', + '10': '2.5rem', + '12': '3rem', + '16': '4rem', + '24': '6rem', + '32': '8rem', + '48': '12rem', + '64': '16rem', + '1/2': '50%', + '1/3': '33.33333%', + '2/3': '66.66667%', + '1/4': '25%', + '3/4': '75%', + '1/5': '20%', + '2/5': '40%', + '3/5': '60%', + '4/5': '80%', + '1/6': '16.66667%', + '5/6': '83.33333%', + 'full': '100%', + 'screen': '100vw' + }, + + + /* + |----------------------------------------------------------------------------- + | Height https://tailwindcss.com/docs/height + |----------------------------------------------------------------------------- + | + | Here is where you define your height utility sizes. These can be + | percentage based, pixels, rems, or any other units. By default + | we provide a sensible rem based numeric scale plus some other + | common use-cases. You can, of course, modify these values as + | needed. + | + | Class name: .h-{size} + | + */ + + height: { + 'auto': 'auto', + 'px': '1px', + '1': '0.25rem', + '2': '0.5rem', + '3': '0.75rem', + '4': '1rem', + '6': '1.5rem', + '8': '2rem', + '10': '2.5rem', + '12': '3rem', + '16': '4rem', + '24': '6rem', + '32': '8rem', + '48': '12rem', + '64': '16rem', + 'full': '100%', + 'screen': '100vh' + }, + + + /* + |----------------------------------------------------------------------------- + | Minimum width https://tailwindcss.com/docs/min-width + |----------------------------------------------------------------------------- + | + | Here is where you define your minimum width utility sizes. These can + | be percentage based, pixels, rems, or any other units. We provide a + | couple common use-cases by default. You can, of course, modify + | these values as needed. + | + | Class name: .min-w-{size} + | + */ + + minWidth: { + '0': '0', + 'full': '100%', + }, + + + /* + |----------------------------------------------------------------------------- + | Minimum height https://tailwindcss.com/docs/min-height + |----------------------------------------------------------------------------- + | + | Here is where you define your minimum height utility sizes. These can + | be percentage based, pixels, rems, or any other units. We provide a + | few common use-cases by default. You can, of course, modify these + | values as needed. + | + | Class name: .min-h-{size} + | + */ + + minHeight: { + '0': '0', + 'full': '100%', + 'screen': '100vh' + }, + + + /* + |----------------------------------------------------------------------------- + | Maximum width https://tailwindcss.com/docs/max-width + |----------------------------------------------------------------------------- + | + | Here is where you define your maximum width utility sizes. These can + | be percentage based, pixels, rems, or any other units. By default + | we provide a sensible rem based scale and a "full width" size, + | which is basically a reset utility. You can, of course, + | modify these values as needed. + | + | Class name: .max-w-{size} + | + */ + + maxWidth: { + 'xs': '20rem', + 'sm': '30rem', + 'md': '40rem', + 'lg': '50rem', + 'xl': '60rem', + '2xl': '70rem', + '3xl': '80rem', + '4xl': '90rem', + '5xl': '100rem', + 'full': '100%', + }, + + + /* + |----------------------------------------------------------------------------- + | Maximum height https://tailwindcss.com/docs/max-height + |----------------------------------------------------------------------------- + | + | Here is where you define your maximum height utility sizes. These can + | be percentage based, pixels, rems, or any other units. We provide a + | couple common use-cases by default. You can, of course, modify + | these values as needed. + | + | Class name: .max-h-{size} + | + */ + + maxHeight: { + 'full': '100%', + 'screen': '100vh', + }, + + + /* + |----------------------------------------------------------------------------- + | Padding https://tailwindcss.com/docs/padding + |----------------------------------------------------------------------------- + | + | Here is where you define your padding utility sizes. These can be + | percentage based, pixels, rems, or any other units. By default we + | provide a sensible rem based numeric scale plus a couple other + | common use-cases like "1px". You can, of course, modify these + | values as needed. + | + | Class name: .p{side?}-{size} + | + */ + + padding: { + 'px': '1px', + '0': '0', + '1': '0.25rem', + '2': '0.5rem', + '3': '0.75rem', + '4': '1rem', + '6': '1.5rem', + '8': '2rem', + }, + + + /* + |----------------------------------------------------------------------------- + | Margin https://tailwindcss.com/docs/margin + |----------------------------------------------------------------------------- + | + | Here is where you define your margin utility sizes. These can be + | percentage based, pixels, rems, or any other units. By default we + | provide a sensible rem based numeric scale plus a couple other + | common use-cases like "1px". You can, of course, modify these + | values as needed. + | + | Class name: .m{side?}-{size} + | + */ + + margin: { + 'auto': 'auto', + 'px': '1px', + '0': '0', + '1': '0.25rem', + '2': '0.5rem', + '3': '0.75rem', + '4': '1rem', + '6': '1.5rem', + '8': '2rem', + }, + + + /* + |----------------------------------------------------------------------------- + | Negative margin https://tailwindcss.com/docs/negative-margin + |----------------------------------------------------------------------------- + | + | Here is where you define your negative margin utility sizes. These can + | be percentage based, pixels, rems, or any other units. By default we + | provide matching values to the padding scale since these utilities + | generally get used together. You can, of course, modify these + | values as needed. + | + | Class name: .-m{side?}-{size} + | + */ + + negativeMargin: { + 'px': '1px', + '0': '0', + '1': '0.25rem', + '2': '0.5rem', + '3': '0.75rem', + '4': '1rem', + '6': '1.5rem', + '8': '2rem', + }, + + + /* + |----------------------------------------------------------------------------- + | Shadows https://tailwindcss.com/docs/shadows + |----------------------------------------------------------------------------- + | + | Here is where you define your shadow utilities. As you can see from + | the defaults we provide, it's possible to apply multiple shadows + | per utility using comma separation. + | + | If a `default` shadow is provided, it will be made available as the non- + | suffixed `.shadow` utility. + | + | Class name: .shadow-{size?} + | + */ + + 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', + }, + + + /* + |----------------------------------------------------------------------------- + | Z-index https://tailwindcss.com/docs/z-index + |----------------------------------------------------------------------------- + | + | Here is where you define your z-index utility values. By default we + | provide a sensible numeric scale. You can, of course, modify these + | values as needed. + | + | Class name: .z-{index} + | + */ + + zIndex: { + 'auto': 'auto', + '0': 0, + '10': 10, + '20': 20, + '30': 30, + '40': 40, + '50': 50, + }, + + + /* + |----------------------------------------------------------------------------- + | Opacity https://tailwindcss.com/docs/opacity + |----------------------------------------------------------------------------- + | + | Here is where you define your opacity utility values. By default we + | provide a sensible numeric scale. You can, of course, modify these + | values as needed. + | + | Class name: .opacity-{name} + | + */ + + opacity: { + '0': '0', + '25': '.25', + '50': '.5', + '75': '.75', + '100': '1', + }, + + + /* + |----------------------------------------------------------------------------- + | Options https://tailwindcss.com/docs/configuration#options + |----------------------------------------------------------------------------- + | + | Here is where you can set your Tailwind configuration options. For more + | details about these options, visit the configuration options documentation. + | + */ + + options: { + prefix: '', + important: false, + }, + +} diff --git a/examples/with-tailwindcss/styles/index.css b/examples/with-tailwindcss/styles/index.css new file mode 100644 index 00000000..c3b331bb --- /dev/null +++ b/examples/with-tailwindcss/styles/index.css @@ -0,0 +1,55 @@ +@import "./button.css"; + +@tailwind preflight; +@tailwind utilities; + +.hero { + width: 100%; + color: #333; +} + +.title { + margin: 0; + width: 100%; + padding-top: 80px; + line-height: 1.15; + font-size: 48px; +} + +.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; +}