mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
Add documentation to config
This commit is contained in:
Jonathan Reinink
parent
3d8647b33c
commit
5e19fb5f62
370
defaultConfig.js
370
defaultConfig.js
@ -1,3 +1,49 @@
|
||||
/*
|
||||
|
||||
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 values with some
|
||||
| of the Tailwind defaults.
|
||||
|
|
||||
*/
|
||||
|
||||
var defaultConfig = require('tailwindcss').defaultConfig
|
||||
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Colors
|
||||
|--------------------------------------------------------------------------
|
||||
|
|
||||
| Here you can specify the colors used in your project. As you'll see
|
||||
| below these colors are applied to the text, background and border
|
||||
| utilities.
|
||||
|
|
||||
| We've provided a bunch of colors to get you started, but please modify
|
||||
| them for your project. Also, how you name your colors is entirely up
|
||||
| to you. You can use color names (as we've done below), or follow a
|
||||
| numeric scale (like 100, 200, 300), or something else entirely.
|
||||
|
|
||||
*/
|
||||
|
||||
var colors = {
|
||||
'black': '#000000',
|
||||
'white': '#ffffff',
|
||||
@ -70,20 +116,93 @@ var colors = {
|
||||
'pink-lighter': '#fdf2f5',
|
||||
}
|
||||
|
||||
|
||||
module.exports = {
|
||||
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Colors
|
||||
|--------------------------------------------------------------------------
|
||||
|
|
||||
| The color palette defined above is also assigned to the "colors" key of
|
||||
| your Tailwind config. This makes it easy to access them your CSS using
|
||||
| Tailwind's config helper. For example:
|
||||
|
|
||||
| .error { color: config('colors.red') }
|
||||
|
|
||||
*/
|
||||
|
||||
colors: colors,
|
||||
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Screens
|
||||
|--------------------------------------------------------------------------
|
||||
|
|
||||
| Screens in Tailwind are essentially 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.
|
||||
|
|
||||
| Tailwind also allows for more complex screen definitions, which can be
|
||||
| useful in certain situations. Be sure to read the full responsive
|
||||
| documentation at https://tailwindcss.com/docs/responsive.
|
||||
|
|
||||
*/
|
||||
|
||||
screens: {
|
||||
sm: '576px',
|
||||
md: '768px',
|
||||
lg: '992px',
|
||||
xl: '1200px',
|
||||
},
|
||||
|
||||
|
||||
text: {
|
||||
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| 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.
|
||||
|
|
||||
*/
|
||||
|
||||
fonts: {
|
||||
'sans': '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue',
|
||||
'serif': 'Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif',
|
||||
'mono': '"SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
|
||||
},
|
||||
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Text sizes
|
||||
|--------------------------------------------------------------------------
|
||||
|
|
||||
| Here is where you define your text sizes. These will be available as
|
||||
| .text-{size} utilities. 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 unit
|
||||
| types you prefer, be it rems, ems, pixels or other.
|
||||
|
|
||||
*/
|
||||
|
||||
sizes: {
|
||||
'xs': '.75rem', // 12px
|
||||
'sm': '.875rem', // 14px
|
||||
@ -94,6 +213,21 @@ module.exports = {
|
||||
'3xl': '2.375rem', // 38px
|
||||
'4xl': '2.875rem', // 46px
|
||||
},
|
||||
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Font weights
|
||||
|--------------------------------------------------------------------------
|
||||
|
|
||||
| Here is where you define your font weights. These will be available as
|
||||
| .font-{weight} utilities. 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.
|
||||
|
|
||||
*/
|
||||
|
||||
weights: {
|
||||
'hairline': 100,
|
||||
'thin': 200,
|
||||
@ -105,23 +239,82 @@ module.exports = {
|
||||
'extrabold': 800,
|
||||
'black': 900,
|
||||
},
|
||||
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Text leading (line height)
|
||||
|--------------------------------------------------------------------------
|
||||
|
|
||||
| Add...
|
||||
|
|
||||
*/
|
||||
|
||||
leading: {
|
||||
'none': 1,
|
||||
'tight': 1.25,
|
||||
'normal': 1.5,
|
||||
'loose': 2,
|
||||
},
|
||||
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Text tracking (spacing)
|
||||
|--------------------------------------------------------------------------
|
||||
|
|
||||
| Add...
|
||||
|
|
||||
*/
|
||||
|
||||
tracking: {
|
||||
'tight': '-0.05em',
|
||||
'normal': '0',
|
||||
'wide': '0.05em',
|
||||
},
|
||||
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Text colors
|
||||
|--------------------------------------------------------------------------
|
||||
|
|
||||
| Add...
|
||||
|
|
||||
*/
|
||||
|
||||
colors: colors,
|
||||
|
||||
},
|
||||
|
||||
backgrounds: {
|
||||
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Background colors
|
||||
|--------------------------------------------------------------------------
|
||||
|
|
||||
| Add...
|
||||
|
|
||||
*/
|
||||
|
||||
colors: colors,
|
||||
|
||||
},
|
||||
|
||||
borders: {
|
||||
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Border widths
|
||||
|--------------------------------------------------------------------------
|
||||
|
|
||||
| Add...
|
||||
|
|
||||
*/
|
||||
|
||||
widths: {
|
||||
default: '1px',
|
||||
'0': '0',
|
||||
@ -129,15 +322,51 @@ module.exports = {
|
||||
'4': '4px',
|
||||
'8': '8px',
|
||||
},
|
||||
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Border colors
|
||||
|--------------------------------------------------------------------------
|
||||
|
|
||||
| Add...
|
||||
|
|
||||
*/
|
||||
|
||||
colors: Object.assign({ default: colors['slate-lighter'] }, colors)
|
||||
|
||||
},
|
||||
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Radiuses
|
||||
|--------------------------------------------------------------------------
|
||||
|
|
||||
| Add...
|
||||
|
|
||||
*/
|
||||
|
||||
radiuses: {
|
||||
default: '.25rem',
|
||||
sm: '.125rem',
|
||||
lg: '.5rem',
|
||||
pill: '9999px',
|
||||
},
|
||||
|
||||
|
||||
sizing: {
|
||||
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Width
|
||||
|--------------------------------------------------------------------------
|
||||
|
|
||||
| Add...
|
||||
|
|
||||
*/
|
||||
|
||||
width: {
|
||||
'auto': 'auto',
|
||||
'px': '1px',
|
||||
@ -168,6 +397,17 @@ module.exports = {
|
||||
'full': '100%',
|
||||
'screen': '100vw'
|
||||
},
|
||||
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Height
|
||||
|--------------------------------------------------------------------------
|
||||
|
|
||||
| Add...
|
||||
|
|
||||
*/
|
||||
|
||||
height: {
|
||||
'auto': 'auto',
|
||||
'px': '1px',
|
||||
@ -187,19 +427,48 @@ module.exports = {
|
||||
'full': '100%',
|
||||
'screen': '100vh'
|
||||
},
|
||||
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Minimum width
|
||||
|--------------------------------------------------------------------------
|
||||
|
|
||||
| Add...
|
||||
|
|
||||
*/
|
||||
|
||||
minWidth: {
|
||||
'0': '0',
|
||||
'full': '100%',
|
||||
},
|
||||
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Minimum height
|
||||
|--------------------------------------------------------------------------
|
||||
|
|
||||
| Add...
|
||||
|
|
||||
*/
|
||||
|
||||
minHeight: {
|
||||
'0': '0',
|
||||
'full': '100%',
|
||||
'screen': '100vh'
|
||||
},
|
||||
maxHeight: {
|
||||
'full': '100%',
|
||||
'screen': '100vh'
|
||||
},
|
||||
minWidth: {
|
||||
'0': '0',
|
||||
'full': '100%',
|
||||
},
|
||||
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Maximum width
|
||||
|--------------------------------------------------------------------------
|
||||
|
|
||||
| Add...
|
||||
|
|
||||
*/
|
||||
|
||||
maxWidth: {
|
||||
'xs': '20rem',
|
||||
'sm': '30rem',
|
||||
@ -212,8 +481,36 @@ module.exports = {
|
||||
'5xl': '100rem',
|
||||
'full': '100%',
|
||||
},
|
||||
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Maximum height
|
||||
|--------------------------------------------------------------------------
|
||||
|
|
||||
| Add...
|
||||
|
|
||||
*/
|
||||
|
||||
maxHeight: {
|
||||
'full': '100%',
|
||||
'screen': '100vh'
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
spacing: {
|
||||
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Padding
|
||||
|--------------------------------------------------------------------------
|
||||
|
|
||||
| Add...
|
||||
|
|
||||
*/
|
||||
|
||||
padding: {
|
||||
'px': '1px',
|
||||
'0': '0',
|
||||
@ -224,6 +521,17 @@ module.exports = {
|
||||
'6': '1.5rem',
|
||||
'8': '2rem',
|
||||
},
|
||||
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Margin
|
||||
|--------------------------------------------------------------------------
|
||||
|
|
||||
| Add...
|
||||
|
|
||||
*/
|
||||
|
||||
margin: {
|
||||
'px': '1px',
|
||||
'0': '0',
|
||||
@ -234,6 +542,17 @@ module.exports = {
|
||||
'6': '1.5rem',
|
||||
'8': '2rem',
|
||||
},
|
||||
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Negative margin
|
||||
|--------------------------------------------------------------------------
|
||||
|
|
||||
| Add...
|
||||
|
|
||||
*/
|
||||
|
||||
negativeMargin: {
|
||||
'px': '1px',
|
||||
'0': '0',
|
||||
@ -244,7 +563,19 @@ module.exports = {
|
||||
'6': '1.5rem',
|
||||
'8': '2rem',
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Shadows
|
||||
|--------------------------------------------------------------------------
|
||||
|
|
||||
| Add...
|
||||
|
|
||||
*/
|
||||
|
||||
shadows: {
|
||||
default: '0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.15)',
|
||||
'md': '0 3px 6px rgba(0,0,0,.12), 0 3px 6px rgba(0,0,0,.13)',
|
||||
@ -252,6 +583,17 @@ module.exports = {
|
||||
'inner': 'inset 0 1px 2px rgba(0, 0, 0, 0.05)',
|
||||
'none': 'none',
|
||||
},
|
||||
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Z-index
|
||||
|--------------------------------------------------------------------------
|
||||
|
|
||||
| Add...
|
||||
|
|
||||
*/
|
||||
|
||||
zIndex: {
|
||||
'0': 0,
|
||||
'10': 10,
|
||||
@ -261,6 +603,17 @@ module.exports = {
|
||||
'50': 50,
|
||||
'auto': 'auto',
|
||||
},
|
||||
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Opacity
|
||||
|--------------------------------------------------------------------------
|
||||
|
|
||||
| Add...
|
||||
|
|
||||
*/
|
||||
|
||||
opacity: {
|
||||
'0': '0',
|
||||
'25': '.25',
|
||||
@ -268,4 +621,5 @@ module.exports = {
|
||||
'75': '.75',
|
||||
'100': '1',
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user