mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
Improve formatting of config, and add links and class names
This commit is contained in:
Jonathan Reinink
parent
165c001e65
commit
382537f86a
205
defaultConfig.js
205
defaultConfig.js
@ -14,9 +14,9 @@ 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
|
||||
@ -29,9 +29,9 @@ var defaultConfig = require('tailwindcss').defaultConfig
|
||||
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Colors
|
||||
|--------------------------------------------------------------------------
|
||||
|-------------------------------------------------------------------------------
|
||||
| Colors https://tailwindcss.com/docs/color-palette
|
||||
|-------------------------------------------------------------------------------
|
||||
|
|
||||
| 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
|
||||
@ -116,13 +116,12 @@ var colors = {
|
||||
'pink-lighter': '#fdf2f5',
|
||||
}
|
||||
|
||||
|
||||
module.exports = {
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Colors
|
||||
|--------------------------------------------------------------------------
|
||||
|-----------------------------------------------------------------------------
|
||||
| Colors https://tailwindcss.com/docs/color-palette
|
||||
|-----------------------------------------------------------------------------
|
||||
|
|
||||
| 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
|
||||
@ -136,9 +135,9 @@ module.exports = {
|
||||
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Screens
|
||||
|--------------------------------------------------------------------------
|
||||
|-----------------------------------------------------------------------------
|
||||
| Screens https://tailwindcss.com/docs/responsive
|
||||
|-----------------------------------------------------------------------------
|
||||
|
|
||||
| Screens in Tailwind are essentially CSS media queries. They define the
|
||||
| responsive breakpoints for your project. By default Tailwind takes a
|
||||
@ -147,8 +146,8 @@ module.exports = {
|
||||
| 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 read the full responsive
|
||||
| documentation at https://tailwindcss.com/docs/responsive.
|
||||
| useful in certain situations. Be sure to see the full responsive
|
||||
| documentation for a complete list of options.
|
||||
|
|
||||
*/
|
||||
|
||||
@ -161,9 +160,9 @@ module.exports = {
|
||||
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Fonts
|
||||
|--------------------------------------------------------------------------
|
||||
|-----------------------------------------------------------------------------
|
||||
| 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.
|
||||
@ -174,6 +173,8 @@ module.exports = {
|
||||
| any device or OS you're using, since it just uses the default fonts
|
||||
| provided by the platform.
|
||||
|
|
||||
| Class name: .font-{name}
|
||||
|
|
||||
*/
|
||||
|
||||
fonts: {
|
||||
@ -184,9 +185,9 @@ module.exports = {
|
||||
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Text sizes
|
||||
|--------------------------------------------------------------------------
|
||||
|-----------------------------------------------------------------------------
|
||||
| Text sizes https://tailwindcss.com/docs/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
|
||||
@ -198,6 +199,8 @@ module.exports = {
|
||||
| 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: {
|
||||
@ -213,9 +216,9 @@ module.exports = {
|
||||
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Font weights https://tailwindcss.com/docs/font-weights
|
||||
|--------------------------------------------------------------------------
|
||||
|-----------------------------------------------------------------------------
|
||||
| Font weights https://tailwindcss.com/docs/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
|
||||
@ -223,6 +226,8 @@ module.exports = {
|
||||
| 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: {
|
||||
@ -239,9 +244,9 @@ module.exports = {
|
||||
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Leading (line height) https://tailwindcss.com/docs/text-leading
|
||||
|--------------------------------------------------------------------------
|
||||
|-----------------------------------------------------------------------------
|
||||
| Leading (line height) https://tailwindcss.com/docs/text-leading
|
||||
|-----------------------------------------------------------------------------
|
||||
|
|
||||
| Here is where you define your line height values, or as we call them
|
||||
| in Tailwind, leadings.
|
||||
@ -259,9 +264,9 @@ module.exports = {
|
||||
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Tracking (letter spacing) https://tailwindcss.com/docs/text-tracking
|
||||
|--------------------------------------------------------------------------
|
||||
|-----------------------------------------------------------------------------
|
||||
| Tracking (letter spacing) https://tailwindcss.com/docs/text-tracking
|
||||
|-----------------------------------------------------------------------------
|
||||
|
|
||||
| Here is where you define your letter spacing values, or as we call them
|
||||
| in Tailwind, tracking.
|
||||
@ -278,36 +283,42 @@ module.exports = {
|
||||
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Text colors
|
||||
|--------------------------------------------------------------------------
|
||||
|-----------------------------------------------------------------------------
|
||||
| Text colors https://tailwindcss.com/docs/text-colors
|
||||
|-----------------------------------------------------------------------------
|
||||
|
|
||||
| Add...
|
||||
|
|
||||
| Class name: .text-{color}
|
||||
|
|
||||
*/
|
||||
|
||||
textColors: colors,
|
||||
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Background colors
|
||||
|--------------------------------------------------------------------------
|
||||
|-----------------------------------------------------------------------------
|
||||
| Background colors https://tailwindcss.com/docs/background-colors
|
||||
|-----------------------------------------------------------------------------
|
||||
|
|
||||
| Add...
|
||||
|
|
||||
| Class name: .bg-{color}
|
||||
|
|
||||
*/
|
||||
|
||||
backgroundColors: colors,
|
||||
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Border widths
|
||||
|--------------------------------------------------------------------------
|
||||
|-----------------------------------------------------------------------------
|
||||
| Border widths https://tailwindcss.com/docs/border-widths
|
||||
|-----------------------------------------------------------------------------
|
||||
|
|
||||
| Add...
|
||||
|
|
||||
| Class name: .border-{width}
|
||||
|
|
||||
*/
|
||||
|
||||
borderWidths: {
|
||||
@ -320,24 +331,28 @@ module.exports = {
|
||||
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Border colors
|
||||
|--------------------------------------------------------------------------
|
||||
|-----------------------------------------------------------------------------
|
||||
| Border colors https://tailwindcss.com/docs/border-colors
|
||||
|-----------------------------------------------------------------------------
|
||||
|
|
||||
| Add...
|
||||
|
|
||||
| Class name: .border-{color}
|
||||
|
|
||||
*/
|
||||
|
||||
borderColors: Object.assign({ default: colors['slate-lighter'] }, colors)
|
||||
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Radiuses
|
||||
|--------------------------------------------------------------------------
|
||||
|-----------------------------------------------------------------------------
|
||||
| Border radius https://tailwindcss.com/docs/border-radius
|
||||
|-----------------------------------------------------------------------------
|
||||
|
|
||||
| Add...
|
||||
|
|
||||
| Class name: .rounded-{size}
|
||||
|
|
||||
*/
|
||||
|
||||
borderRadius: {
|
||||
@ -349,12 +364,14 @@ module.exports = {
|
||||
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Width
|
||||
|--------------------------------------------------------------------------
|
||||
|-----------------------------------------------------------------------------
|
||||
| Width https://tailwindcss.com/docs/width
|
||||
|-----------------------------------------------------------------------------
|
||||
|
|
||||
| Add...
|
||||
|
|
||||
| Class name: .w-{size}
|
||||
|
|
||||
*/
|
||||
|
||||
width: {
|
||||
@ -390,12 +407,14 @@ module.exports = {
|
||||
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Height
|
||||
|--------------------------------------------------------------------------
|
||||
|-----------------------------------------------------------------------------
|
||||
| Height https://tailwindcss.com/docs/height
|
||||
|-----------------------------------------------------------------------------
|
||||
|
|
||||
| Add...
|
||||
|
|
||||
| Class name: .h-{size}
|
||||
|
|
||||
*/
|
||||
|
||||
height: {
|
||||
@ -420,12 +439,14 @@ module.exports = {
|
||||
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Minimum width
|
||||
|--------------------------------------------------------------------------
|
||||
|-----------------------------------------------------------------------------
|
||||
| Minimum width https://tailwindcss.com/docs/min-width
|
||||
|-----------------------------------------------------------------------------
|
||||
|
|
||||
| Add...
|
||||
|
|
||||
| Class name: .min-w-{size}
|
||||
|
|
||||
*/
|
||||
|
||||
minWidth: {
|
||||
@ -435,12 +456,14 @@ module.exports = {
|
||||
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Minimum height
|
||||
|--------------------------------------------------------------------------
|
||||
|-----------------------------------------------------------------------------
|
||||
| Minimum height https://tailwindcss.com/docs/min-height
|
||||
|-----------------------------------------------------------------------------
|
||||
|
|
||||
| Add...
|
||||
|
|
||||
| Class name: .min-h-{size}
|
||||
|
|
||||
*/
|
||||
|
||||
minHeight: {
|
||||
@ -451,12 +474,14 @@ module.exports = {
|
||||
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Maximum width
|
||||
|--------------------------------------------------------------------------
|
||||
|-----------------------------------------------------------------------------
|
||||
| Maximum width https://tailwindcss.com/docs/max-width
|
||||
|-----------------------------------------------------------------------------
|
||||
|
|
||||
| Add...
|
||||
|
|
||||
| Class name: .max-w-{size}
|
||||
|
|
||||
*/
|
||||
|
||||
maxWidth: {
|
||||
@ -474,12 +499,14 @@ module.exports = {
|
||||
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Maximum height
|
||||
|--------------------------------------------------------------------------
|
||||
|-----------------------------------------------------------------------------
|
||||
| Maximum height https://tailwindcss.com/docs/max-height
|
||||
|-----------------------------------------------------------------------------
|
||||
|
|
||||
| Add...
|
||||
|
|
||||
| Class name: .max-h-{size}
|
||||
|
|
||||
*/
|
||||
|
||||
maxHeight: {
|
||||
@ -489,12 +516,14 @@ module.exports = {
|
||||
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Padding
|
||||
|--------------------------------------------------------------------------
|
||||
|-----------------------------------------------------------------------------
|
||||
| Padding https://tailwindcss.com/docs/padding
|
||||
|-----------------------------------------------------------------------------
|
||||
|
|
||||
| Add...
|
||||
|
|
||||
| Class name: .p-{size}
|
||||
|
|
||||
*/
|
||||
|
||||
padding: {
|
||||
@ -510,12 +539,14 @@ module.exports = {
|
||||
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Margin
|
||||
|--------------------------------------------------------------------------
|
||||
|-----------------------------------------------------------------------------
|
||||
| Margin https://tailwindcss.com/docs/margin
|
||||
|-----------------------------------------------------------------------------
|
||||
|
|
||||
| Add...
|
||||
|
|
||||
| Class name: .m-{size}
|
||||
|
|
||||
*/
|
||||
|
||||
margin: {
|
||||
@ -531,12 +562,14 @@ module.exports = {
|
||||
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Negative margin
|
||||
|--------------------------------------------------------------------------
|
||||
|-----------------------------------------------------------------------------
|
||||
| Negative margin https://tailwindcss.com/docs/negative-margin
|
||||
|-----------------------------------------------------------------------------
|
||||
|
|
||||
| Add...
|
||||
|
|
||||
| Class name: .-m-{size}
|
||||
|
|
||||
*/
|
||||
|
||||
negativeMargin: {
|
||||
@ -552,12 +585,14 @@ module.exports = {
|
||||
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Shadows
|
||||
|--------------------------------------------------------------------------
|
||||
|-----------------------------------------------------------------------------
|
||||
| Shadows https://tailwindcss.com/docs/shadows
|
||||
|-----------------------------------------------------------------------------
|
||||
|
|
||||
| Add...
|
||||
|
|
||||
| Class name: .shadow-{size}
|
||||
|
|
||||
*/
|
||||
|
||||
shadows: {
|
||||
@ -570,12 +605,14 @@ module.exports = {
|
||||
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Z-index
|
||||
|--------------------------------------------------------------------------
|
||||
|-----------------------------------------------------------------------------
|
||||
| Z-index https://tailwindcss.com/docs/z-index
|
||||
|-----------------------------------------------------------------------------
|
||||
|
|
||||
| Add...
|
||||
|
|
||||
| Class name: .z-{name}
|
||||
|
|
||||
*/
|
||||
|
||||
zIndex: {
|
||||
@ -590,12 +627,14 @@ module.exports = {
|
||||
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Opacity
|
||||
|--------------------------------------------------------------------------
|
||||
|-----------------------------------------------------------------------------
|
||||
| Opacity https://tailwindcss.com/docs/opacity
|
||||
|-----------------------------------------------------------------------------
|
||||
|
|
||||
| Add...
|
||||
|
|
||||
| Class name: .opacity-{name}
|
||||
|
|
||||
*/
|
||||
|
||||
opacity: {
|
||||
@ -608,13 +647,13 @@ module.exports = {
|
||||
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
|-----------------------------------------------------------------------------
|
||||
| Packages
|
||||
|--------------------------------------------------------------------------
|
||||
|-----------------------------------------------------------------------------
|
||||
|
|
||||
| Here is where you can define the configuration for any Tailwind packages
|
||||
| you're using. These can be utility packs, component bundles, or even
|
||||
| complete themes. You'll want to reference the package documentation
|
||||
| complete themes. You'll want to reference each package's documentation
|
||||
| for a list of settings available for it.
|
||||
|
|
||||
*/
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user