" " Quotation Marks - "
& & Ampersand - &
< < Less than sign - <
> > Greater than sign - >
Non-breaking space
© © Copyright Symbol - ©
@ Ü @ symbol - @
• ö Small bullet - .
™ û Trademark Symbol - ™
================================================
FILE: frontend/react.js
================================================
/* *******************************************************************************************
* REACT.JS CHEATSHEET
* DOCUMENTATION: https://reactjs.org/docs/
* FILE STRUCTURE: https://reactjs.org/docs/faq-structure.html
* ******************************************************************************************* */
```
npm install --save react // declarative and flexible JavaScript library for building UI
npm install --save react-dom // serves as the entry point of the DOM-related rendering paths
npm install --save prop-types // runtime type checking for React props and similar objects
```
// notes: don't forget the command lines
/* *******************************************************************************************
* REACT
* https://reactjs.org/docs/react-api.html
* ******************************************************************************************* */
// Create and return a new React element of the given type.
// Code written with JSX will be converted to use React.createElement().
// You will not typically invoke React.createElement() directly if you are using JSX.
React.createElement(
type,
[props],
[...children]
)
// Clone and return a new React element using element as the starting point.
// The resulting element will have the original element’s props with the new props merged in shallowly.
React.cloneElement(
element,
[props],
[...children]
)
// Verifies the object is a React element. Returns true or false.
React.isValidElement(object)
React.Children // provides utilities for dealing with the this.props.children opaque data structure.
// Invokes a function on every immediate child contained within children with this set to thisArg.
React.Children.map(children, function[(thisArg)])
// Like React.Children.map() but does not return an array.
React.Children.forEach(children, function[(thisArg)])
// Returns the total number of components in children,
// equal to the number of times that a callback passed to map or forEach would be invoked.
React.Children.count(children)
// Verifies that children has only one child (a React element) and returns it.
// Otherwise this method throws an error.
React.Children.only(children)
// Returns the children opaque data structure as a flat array with keys assigned to each child.
// Useful if you want to manipulate collections of children in your render methods,
// especially if you want to reorder or slice this.props.children before passing it down.
React.Children.toArray(children)
// The React.Fragment component lets you return multiple elements in a render() method without creating an additional DOM element
// You can also use it with the shorthand <> syntax.
React.Fragment
/* *******************************************************************************************
* REACT.COMPONENT
* React.Component is an abstract base class, so it rarely makes sense to refer to React.Component
* directly. Instead, you will typically subclass it, and define at least a render() method.
* https://reactjs.org/docs/react-component.html
* ******************************************************************************************* */
class Component extends React.Component {
// Will be called before it is mounted
constructor(props) {
// Call this method before any other statement
// or this.props will be undefined in the constructor
super(props);
// The constructor is also often used to bind event handlers to the class instance.
// Binding makes sure the method has access to component attributes like this.props and this.state
this.method = this.method.bind(this);
// The constructor is the right place to initialize state.
this.state = {
active: true,
// In rare cases, it’s okay to initialize state based on props.
// This effectively “forks” the props and sets the state with the initial props.
// If you “fork” props by using them for state, you might also want to implement componentWillReceiveProps(nextProps)
// to keep the state up-to-date with them. But lifting state up is often easier and less bug-prone.
color: props.initialColor
};
}
// Enqueues changes to the component state and
// tells React that this component and its children need to be re-rendered with the updated state.
// setState() does not always immediately update the component. It may batch or defer the update until later.
// This makes reading this.state right after calling setState() a potential pitfall.
// Instead, use componentDidUpdate or a setState callback.
// You may optionally pass an object as the first argument to setState() instead of a function.
setState(updater[, callback]) { }
// Invoked just before mounting occurs (before render())
// This is the only lifecycle hook called on server rendering.
componentWillMount() { }
// Invoked immediately after a component is mounted.
// Initialization that requires DOM nodes should go here.
// If you need to load data from a remote endpoint, this is a good place to instantiate the network request.
// This method is a good place to set up any subscriptions. If you do that, don’t forget to unsubscribe in componentWillUnmount().
componentDidMount() { }
// Invoked before a mounted component receives new props.
// If you need to update the state in response to prop changes (for example, to reset it),
// you may compare this.props and nextProps and perform state transitions using this.setState() in this method.
componentWillReceiveProps(nextProps) { }
// Let React know if a component’s output is not affected by the current change in state or props.
// The default behavior is to re-render on every state change, and in the vast majority of cases you should rely on the default behavior.
// shouldComponentUpdate() is invoked before rendering when new props or state are being received. Defaults to true.
// This method is not called for the initial render or when forceUpdate() is used.
// Returning false does not prevent child components from re-rendering when their state changes.
shouldComponentUpdate(nextProps, nextState) { }
// Invoked just before rendering when new props or state are being received.
// Use this as an opportunity to perform preparation before an update occurs. This method is not called for the initial render.
// Note that you cannot call this.setState() here; nor should you do anything else
// (e.g. dispatch a Redux action) that would trigger an update to a React component before componentWillUpdate() returns.
// If you need to update state in response to props changes, use componentWillReceiveProps() instead.
componentWillUpdate(nextProps, nextState) { }
// Invoked immediately after updating occurs. This method is not called for the initial render.
// Use this as an opportunity to operate on the DOM when the component has been updated.
// This is also a good place to do network requests as long as you compare the current props to previous props (e.g. a network request may not be necessary if the props have not changed).
componentDidUpdate(prevProps, prevState) { }
// Invoked immediately before a component is unmounted and destroyed.
// Perform any necessary cleanup in this method, such as invalidating timers, canceling network requests,
// or cleaning up any subscriptions that were created in componentDidMount().
componentWillUnmount() { }
// Error boundaries are React components that catch JavaScript errors anywhere in their child component tree,
// log those errors, and display a fallback UI instead of the component tree that crashed.
// Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them.
componentDidCatch() { }
// This method is required.
// It should be pure, meaning that it does not modify component state,
// it returns the same result each time it’s invoked, and
// it does not directly interact with the browser (use lifecycle methods for this)
// It must return one of the following types: react elements, string and numbers, portals, null or booleans.
render() {
// Contains the props that were defined by the caller of this component.
console.log(this.props);
// Contains data specific to this component that may change over time.
// The state is user-defined, and it should be a plain JavaScript object.
// If you don’t use it in render(), it shouldn’t be in the state.
// For example, you can put timer IDs directly on the instance.
// Never mutate this.state directly, as calling setState() afterwards may replace the mutation you made.
// Treat this.state as if it were immutable.
console.log(this.state);
return (
{/* Comment goes here */}
Hello, {this.props.name}!
);
}
}
// Can be defined as a property on the component class itself, to set the default props for the class.
// This is used for undefined props, but not for null props.
Component.defaultProps = {
color: 'blue'
};
component = new Component();
// By default, when your component’s state or props change, your component will re-render.
// If your render() method depends on some other data, you can tell React that the component needs re-rendering by calling forceUpdate().
// Normally you should try to avoid all uses of forceUpdate() and only read from this.props and this.state in render().
component.forceUpdate(callback)
/* *******************************************************************************************
* REACT.DOM
* The react-dom package provides DOM-specific methods that can be used at the top level of
* your app and as an escape hatch to get outside of the React model if you need to.
* Most of your components should not need to use this module.
* https://reactjs.org/docs/react-dom.html
* ******************************************************************************************* */
// Render a React element into the DOM in the supplied container and return a reference
// to the component (or returns null for stateless components).
ReactDOM.render(element, container[, callback])
// Same as render(), but is used to hydrate a container whose HTML contents were rendered
// by ReactDOMServer. React will attempt to attach event listeners to the existing markup.
ReactDOM.hydrate(element, container[, callback])
// Remove a mounted React component from the DOM and clean up its event handlers and state.
// If no component was mounted in the container, calling this function does nothing.
// Returns true if a component was unmounted and false if there was no component to unmount.
ReactDOM.unmountComponentAtNode(container)
// If this component has been mounted into the DOM, this returns the corresponding native browser
// DOM element. This method is useful for reading values out of the DOM, such as form field values
// and performing DOM measurements. In most cases, you can attach a ref to the DOM node and avoid
// using findDOMNode at all.
ReactDOM.findDOMNode(component)
// Creates a portal. Portals provide a way to render children into a DOM node that exists outside
// the hierarchy of the DOM component.
ReactDOM.createPortal(child, container)
/* *******************************************************************************************
* REACTDOMSERVER
* The ReactDOMServer object enables you to render components to static markup.
* https://reactjs.org/docs/react-dom.html
* ******************************************************************************************* */
// Render a React element to its initial HTML. React will return an HTML string.
// You can use this method to generate HTML on the server and send the markup down on the initial
// request for faster page loads and to allow search engines to crawl your pages for SEO purposes.
ReactDOMServer.renderToString(element)
// Similar to renderToString, except this doesn’t create extra DOM attributes that React uses
// internally, such as data-reactroot. This is useful if you want to use React as a simple static
// page generator, as stripping away the extra attributes can save some bytes.
ReactDOMServer.renderToStaticMarkup(element)
// Render a React element to its initial HTML. Returns a Readable stream that outputs an HTML string.
// The HTML output by this stream is exactly equal to what ReactDOMServer.renderToString would return.
// You can use this method to generate HTML on the server and send the markup down on the initial
// request for faster page loads and to allow search engines to crawl your pages for SEO purposes.
ReactDOMServer.renderToNodeStream(element)
// Similar to renderToNodeStream, except this doesn’t create extra DOM attributes that React uses
// internally, such as data-reactroot. This is useful if you want to use React as a simple static
// page generator, as stripping away the extra attributes can save some bytes.
ReactDOMServer.renderToStaticNodeStream(element)
/* *******************************************************************************************
* TYPECHECKING WITH PROPTYPES
* https://reactjs.org/docs/typechecking-with-proptypes.html
* ******************************************************************************************* */
import PropTypes from 'prop-types';
MyComponent.propTypes = {
// You can declare that a prop is a specific JS type. By default, these
// are all optional.
optionalArray: PropTypes.array,
optionalBool: PropTypes.bool,
optionalFunc: PropTypes.func,
optionalNumber: PropTypes.number,
optionalObject: PropTypes.object,
optionalString: PropTypes.string,
optionalSymbol: PropTypes.symbol,
// Anything that can be rendered: numbers, strings, elements or an array
// (or fragment) containing these types.
optionalNode: PropTypes.node,
// A React element.
optionalElement: PropTypes.element,
// You can also declare that a prop is an instance of a class. This uses
// JS's instanceof operator.
optionalMessage: PropTypes.instanceOf(Message),
// You can ensure that your prop is limited to specific values by treating
// it as an enum.
optionalEnum: PropTypes.oneOf(['News', 'Photos']),
// An object that could be one of many types
optionalUnion: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
PropTypes.instanceOf(Message)
]),
// An array of a certain type
optionalArrayOf: PropTypes.arrayOf(PropTypes.number),
// An object with property values of a certain type
optionalObjectOf: PropTypes.objectOf(PropTypes.number),
// An object taking on a particular shape
optionalObjectWithShape: PropTypes.shape({
color: PropTypes.string,
fontSize: PropTypes.number
}),
// You can chain any of the above with `isRequired` to make sure a warning
// is shown if the prop isn't provided.
requiredFunc: PropTypes.func.isRequired,
// A value of any data type
requiredAny: PropTypes.any.isRequired,
// You can also specify a custom validator. It should return an Error
// object if the validation fails. Don't `console.warn` or throw, as this
// won't work inside `oneOfType`.
customProp: function(props, propName, componentName) {
if (!/matchme/.test(props[propName])) {
return new Error(
'Invalid prop `' + propName + '` supplied to' +
' `' + componentName + '`. Validation failed.'
);
}
},
// You can also supply a custom validator to `arrayOf` and `objectOf`.
// It should return an Error object if the validation fails. The validator
// will be called for each key in the array or object. The first two
// arguments of the validator are the array or object itself, and the
// current item's key.
customArrayProp: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {
if (!/matchme/.test(propValue[key])) {
return new Error(
'Invalid prop `' + propFullName + '` supplied to' +
' `' + componentName + '`. Validation failed.'
);
}
})
};
================================================
FILE: frontend/tailwind.css
================================================
/* *******************************************************************************************
* TAILWIND.CSS
* DOCUMENTATION: https://tailwindcss.com/
* ******************************************************************************************* */
/*
* Available breakpoints
* --------------------
* sm: min-width: 640px;
* md: min-width: 768px;
* lg: min-width: 1024px;
* xl: min-width: 1280px;
*/
/* *******************************************************************************************
* LAYOUT
* ******************************************************************************************* */
/*
* Container
* --------------------
* A component for fixing an element's width to the current breakpoint.
*/
.container
/*
* Box-sizing
* --------------------
* Utilities for controlling how the browser should calculate an element's total size.
* By default, only responsive variants are generated for box-sizing utilities.
*/
.box-border /* box-sizing: border-box; */
.box-content /* box-sizing: content-box; */
/*
* Display
* --------------------
* Utilities for controlling the display box type of an element.
* By default, only responsive variants are generated for display utilities.
*/
.hidden /* display: none; */
.block /* display: block; */
.inline-block /* display: inline-block; */
.inline /* display: inline; */
.flex /* display: flex; */
.inline-flex /* display: inline-flex; */
.grid /* display: grid; */
.table /* display: table; */
.table-caption /* display: table-caption; */
.table-cell /* display: table-cell; */
.table-column /* display: table-column; */
.table-column-group /* display: table-column-group; */
.table-footer-group /* display: table-footer-group; */
.table-header-group /* display: table-header-group; */
.table-row-group /* display: table-row-group; */
.table-row /* display: table-row; */
/*
* Floats
* --------------------
* Utilities for controlling the wrapping of content around an element.
* By default, only responsive variants are generated for float utilities.
*/
.float-right /* float: right; */
.float-left /* float: left; */
.float-none /* float: none; */
.clearfix /* &::after { content: ""; display: table; clear: both; } */
/*
* Clear
* --------------------
* Utilities for controlling the wrapping of content around an element.
* By default, only responsive variants are generated for clear utilities.
*/
.clear-left /* clear: left; */
.clear-right /* clear: right; */
.clear-both /* clear: both; */
/*
* Object Fit
* --------------------
* Utilities for controlling how a replaced element's content should be resized.
* By default, only responsive variants are generated for object-fit utilities.
*/
.object-contain /* object-fit: contain; */
.object-cover /* object-fit: cover; */
.object-fill /* object-fit: fill; */
.object-none /* object-fit: none; */
.object-scale-down /* object-fit: scale-down; */
/*
* Object Position
* --------------------
* Utilities for controlling how a replaced element's content should be positioned within its container.
* By default, only responsive variants are generated for object position utilities.
*/
.object-bottom /* object-position: bottom; */
.object-center /* object-position: center; */
.object-left /* object-position: left; */
.object-left-bottom /* object-position: left bottom; */
.object-left-top /* object-position: left top; */
.object-right /* object-position: right; */
.object-right-bottom /* object-position: right bottom; */
.object-right-top /* object-position: right top; */
.object-top /* object-position: top; */
/*
* Overflow
* --------------------
* Utilities for controlling how an element handles content that is too large for the container.
* By default, only responsive variants are generated for overflow utilities.
*/
.overflow-auto /* overflow: auto; */
.overflow-hidden /* overflow: hidden; */
.overflow-visible /* overflow: visible; */
.overflow-scroll /* overflow: scroll; */
.overflow-x-auto /* overflow-x: auto; */
.overflow-y-auto /* overflow-y: auto; */
.overflow-x-hidden /* overflow-x: hidden; */
.overflow-y-hidden /* overflow-y: hidden; */
.overflow-x-visible /* overflow-x: visible; */
.overflow-y-visible /* overflow-y: visible; */
.overflow-x-scroll /* overflow-x: scroll; */
.overflow-y-scroll /* overflow-y: scroll; */
.scrolling-touch /* -webkit-overflow-scrolling: touch; */
.scrolling-auto /* -webkit-overflow-scrolling: auto; */
/*
* Position
* --------------------
* Utilities for controlling how an element is positioned in the DOM.
* By default, only responsive variants are generated for position utilities.
*/
.static /* position: static; */
.fixed /* position: fixed; */
.absolute /* position: absolute; */
.relative /* position: relative; */
.sticky /* position: sticky; */
/*
* Top / Right / Bottom / Left
* --------------------
* Utilities for controlling the placement of positioned elements.
* By default, only responsive variants are generated for top, right, bottom, left, and inset utilities.
*/
.inset-0 /* top: 0; right: 0; bottom: 0; left: 0; */
.inset-y-0 /* top: 0; bottom: 0; */
.inset-x-0 /* right: 0; left: 0; */
.top-0 /* top: 0; */
.right-0 /* right: 0; */
.bottom-0 /* bottom: 0; */
.left-0 /* left: 0; */
.inset-auto /* top: auto; right: auto; bottom: auto; left: auto; */
.inset-y-auto /* top: auto; bottom: auto; */
.inset-x-auto /* left: auto; right: auto; */
.top-auto /* top: auto; */
.bottom-auto /* bottom: auto; */
.left-auto /* left: auto; */
.right-auto /* right: auto; */
/*
* Visibility
* --------------------
* Utilities for controlling the visibility of an element.
* By default, only responsive variants are generated for visibility utilities.
*/
.visible /* visibility: visible; */
.invisible /* visibility: hidden; */
/*
* Z-Index
* --------------------
* Utilities for controlling the stack order of an element.
* By default, only responsive variants are generated for z-index utilities.
*/
.z-0 /* z-index: 0; */
.z-10 /* z-index: 10; */
.z-20 /* z-index: 20; */
.z-30 /* z-index: 30; */
.z-40 /* z-index: 40; */
.z-50 /* z-index: 50; */
.z-auto /* z-index: auto; */
/* *******************************************************************************************
* FLEXBOX
* ******************************************************************************************* */
.flex /* display: flex; */
.inline-flex /* display: inline-flex; */
/*
* Flex Direction
* --------------------
* Utilities for controlling the direction of flex items.
* By default, only responsive variants are generated for flex-direction utilities.
*/
.flex-row /* flex-direction: row; */
.flex-row-reverse /* flex-direction: row-reverse; */
.flex-col /* flex-direction: column; */
.flex-col-reverse /* flex-direction: column-reverse; */
/*
* Flex Wrap
* --------------------
* Utilities for controlling how flex items wrap.
* By default, only responsive variants are generated for flex-wrap utilities.
*/
.flex-no-wrap /* flex-wrap: nowrap; */
.flex-wrap /* flex-wrap: wrap; */
.flex-wrap-reverse /* flex-wrap: wrap-reverse; */
/*
* Align Items
* --------------------
* Utilities for controlling how flex items are positioned along a container's cross axis.
* By default, only responsive variants are generated for align-items utilities.
*/
.items-stretch /* align-items: stretch; */
.items-start /* align-items: flex-start; */
.items-center /* align-items: center; */
.items-end /* align-items: flex-end; */
.items-baseline /* align-items: baseline; */
/*
* Align Content
* --------------------
* Utilities for controlling how lines are positioned in multi-line flex containers.
* By default, only responsive variants are generated for align-content utilities.
*/
.content-start /* align-content: flex-start; */
.content-center /* align-content: center; */
.content-end /* align-content: flex-end; */
.content-between /* align-content: space-between; */
.content-around /* align-content: space-around; */
/*
* Align Self
* --------------------
* Utilities for controlling how an individual flex item is positioned along its container's cross axis.
* By default, only responsive variants are generated for align-self utilities.
*/
.self-auto /* align-self: auto; */
.self-start /* align-self: flex-start; */
.self-center /* align-self: center; */
.self-end /* align-self: flex-end; */
.self-stretch /* align-self: stretch; */
/*
* Justify Content
* --------------------
* Utilities for controlling how flex items are positioned along a container's main axis.
* By default, only responsive variants are generated for justify-content utilities.
*/
.justify-start /* justify-content: flex-start; */
.justify-center /* justify-content: center; */
.justify-end /* justify-content: flex-end; */
.justify-between /* justify-content: space-between; */
.justify-around /* justify-content: space-around; */
/*
* Flex
* --------------------
* Utilities for controlling how flex items both grow and shrink.
* By default, only responsive variants are generated for flex utilities.
*/
.flex-initial /* flex: 0 1 auto; */
.flex-1 /* flex: 1 1 0%; */
.flex-auto /* flex: 1 1 auto; */
.flex-none /* flex: none; */
/*
* Flex Grow
* --------------------
* Utilities for controlling how flex items grow.
* By default, only responsive variants are generated for flex grow utilities.
*/
.flex-grow /* flex-grow: 1; */
.flex-grow-0 /* flex-grow: 0; */
/*
* Flex Shrink
* --------------------
* Utilities for controlling how flex items shrink.
* By default, only responsive variants are generated for flex shrink utilities.
*/
.flex-shrink /* flex-shrink: 1; */
.flex-shrink-0 /* flex-shrink: 0; */
/*
* Order
* --------------------
* Utilities for controlling the order of flex items.
* By default, only responsive variants are generated for order utilities.
*/
.order-first /* order: -9999; */
.order-last /* order: 9999; */
.order-none /* order: 0; */
.order-1 /* order: 1; */
.order-2 /* order: 2; */
.order-3 /* order: 3; */
.order-4 /* order: 4; */
.order-5 /* order: 5; */
.order-6 /* order: 6; */
.order-7 /* order: 7; */
.order-8 /* order: 8; */
.order-9 /* order: 9; */
.order-10 /* order: 10; */
.order-11 /* order: 11; */
.order-12 /* order: 12; */
/* *******************************************************************************************
* GRID
* ******************************************************************************************* */
.grid /* display: grid; */
/*
* Grid Template Columns
* --------------------
* Utilities for specifying the columns in a grid layout.
* By default, only responsive variants are generated for grid-template-columns utilities.
*/
.grid-cols-1 /* grid-template-columns: repeat(1, minmax(0, 1fr)); */
.grid-cols-2 /* grid-template-columns: repeat(2, minmax(0, 1fr)); */
.grid-cols-3 /* grid-template-columns: repeat(3, minmax(0, 1fr)); */
.grid-cols-4 /* grid-template-columns: repeat(4, minmax(0, 1fr)); */
.grid-cols-5 /* grid-template-columns: repeat(5, minmax(0, 1fr)); */
.grid-cols-6 /* grid-template-columns: repeat(6, minmax(0, 1fr)); */
.grid-cols-7 /* grid-template-columns: repeat(7, minmax(0, 1fr)); */
.grid-cols-8 /* grid-template-columns: repeat(8, minmax(0, 1fr)); */
.grid-cols-9 /* grid-template-columns: repeat(9, minmax(0, 1fr)); */
.grid-cols-10 /* grid-template-columns: repeat(10, minmax(0, 1fr)); */
.grid-cols-11 /* grid-template-columns: repeat(11, minmax(0, 1fr)); */
.grid-cols-12 /* grid-template-columns: repeat(12, minmax(0, 1fr)); */
.grid-cols-none /* grid-template-columns: none; */
/*
* Grid Column Start / End
* --------------------
* Utilities for controlling how elements are sized and placed across grid columns.
* By default, only responsive variants are generated for grid-column utilities.
*/
.col-auto /* grid-column: auto; */
.col-span-1 /* grid-column: span 1 / span 1; */
.col-span-2 /* grid-column: span 2 / span 2; */
.col-span-3 /* grid-column: span 3 / span 3; */
.col-span-4 /* grid-column: span 4 / span 4; */
.col-span-5 /* grid-column: span 5 / span 5; */
.col-span-6 /* grid-column: span 6 / span 6; */
.col-span-7 /* grid-column: span 7 / span 7; */
.col-span-8 /* grid-column: span 8 / span 8; */
.col-span-9 /* grid-column: span 9 / span 9; */
.col-span-10 /* grid-column: span 10 / span 10; */
.col-span-11 /* grid-column: span 11 / span 11; */
.col-span-12 /* grid-column: span 12 / span 12; */
.col-start-1 /* grid-column-start: 1; */
.col-start-2 /* grid-column-start: 2; */
.col-start-3 /* grid-column-start: 3; */
.col-start-4 /* grid-column-start: 4; */
.col-start-5 /* grid-column-start: 5; */
.col-start-6 /* grid-column-start: 6; */
.col-start-7 /* grid-column-start: 7; */
.col-start-8 /* grid-column-start: 8; */
.col-start-9 /* grid-column-start: 9; */
.col-start-10 /* grid-column-start: 10; */
.col-start-11 /* grid-column-start: 11; */
.col-start-12 /* grid-column-start: 12; */
.col-start-13 /* grid-column-start: 13; */
.col-start-auto /* grid-column-start: auto; */
.col-end-1 /* grid-column-end: 1; */
.col-end-2 /* grid-column-end: 2; */
.col-end-3 /* grid-column-end: 3; */
.col-end-4 /* grid-column-end: 4; */
.col-end-5 /* grid-column-end: 5; */
.col-end-6 /* grid-column-end: 6; */
.col-end-7 /* grid-column-end: 7; */
.col-end-8 /* grid-column-end: 8; */
.col-end-9 /* grid-column-end: 9; */
.col-end-10 /* grid-column-end: 10; */
.col-end-11 /* grid-column-end: 11; */
.col-end-12 /* grid-column-end: 12; */
.col-end-13 /* grid-column-end: 13; */
.col-end-auto /* grid-column-end: auto; */
/*
* Grid Template Rows
* --------------------
* Utilities for specifying the rows in a grid layout.
* By default, only responsive variants are generated for grid-template-rows utilities.
*/
.grid-rows-1 /* grid-template-rows: repeat(1, minmax(0, 1fr)); */
.grid-rows-2 /* grid-template-rows: repeat(2, minmax(0, 1fr)); */
.grid-rows-3 /* grid-template-rows: repeat(3, minmax(0, 1fr)); */
.grid-rows-4 /* grid-template-rows: repeat(4, minmax(0, 1fr)); */
.grid-rows-5 /* grid-template-rows: repeat(5, minmax(0, 1fr)); */
.grid-rows-6 /* grid-template-rows: repeat(6, minmax(0, 1fr)); */
.grid-rows-none /* grid-template-rows: none; */
/*
* Grid Row Start / End
* --------------------
* Utilities for controlling how elements are sized and placed across grid rows.
* By default, only responsive variants are generated for grid-row utilities.
*/
.row-auto /* grid-row: auto; */
.row-span-1 /* grid-row: span 1 / span 1; */
.row-span-2 /* grid-row: span 2 / span 2; */
.row-span-3 /* grid-row: span 3 / span 3; */
.row-span-4 /* grid-row: span 4 / span 4; */
.row-span-5 /* grid-row: span 5 / span 5; */
.row-span-6 /* grid-row: span 6 / span 6; */
.row-start-1 /* grid-row-start: 1; */
.row-start-2 /* grid-row-start: 2; */
.row-start-3 /* grid-row-start: 3; */
.row-start-4 /* grid-row-start: 4; */
.row-start-5 /* grid-row-start: 5; */
.row-start-6 /* grid-row-start: 6; */
.row-start-7 /* grid-row-start: 7; */
.row-start-auto /* grid-row-start: auto; */
.row-end-1 /* grid-row-end: 1; */
.row-end-2 /* grid-row-end: 2; */
.row-end-3 /* grid-row-end: 3; */
.row-end-4 /* grid-row-end: 4; */
.row-end-5 /* grid-row-end: 5; */
.row-end-6 /* grid-row-end: 6; */
.row-end-7 /* grid-row-end: 7; */
.row-end-auto /* grid-row-end: auto; */
/*
* Gap
* --------------------
* Utilities for controlling gutters between grid rows and columns.
* By default, no responsive, hover, focus, active, or group-hover variants are generated for gap utilities.
*/
.gap-0 /* gap: 0; */
.gap-1 /* gap: 0.25rem; */
.gap-2 /* gap: 0.5rem; */
.gap-3 /* gap: 0.75rem; */
.gap-4 /* gap: 1rem; */
.gap-5 /* gap: 1.25rem; */
.gap-6 /* gap: 1.5rem; */
.gap-8 /* gap: 2rem; */
.gap-10 /* gap: 2.5rem; */
.gap-12 /* gap: 3rem; */
.gap-16 /* gap: 4rem; */
.gap-20 /* gap: 5rem; */
.gap-24 /* gap: 6rem; */
.gap-32 /* gap: 8rem; */
.gap-40 /* gap: 10rem; */
.gap-48 /* gap: 12rem; */
.gap-56 /* gap: 14rem; */
.gap-64 /* gap: 16rem; */
.gap-px /* gap: 1px; */
.row-gap-0 /* row-gap: 0; */
.row-gap-1 /* row-gap: 0.25rem; */
.row-gap-2 /* row-gap: 0.5rem; */
.row-gap-3 /* row-gap: 0.75rem; */
.row-gap-4 /* row-gap: 1rem; */
.row-gap-5 /* row-gap: 1.25rem; */
.row-gap-6 /* row-gap: 1.5rem; */
.row-gap-8 /* row-gap: 2rem; */
.row-gap-10 /* row-gap: 2.5rem; */
.row-gap-12 /* row-gap: 3rem; */
.row-gap-16 /* row-gap: 4rem; */
.row-gap-20 /* row-gap: 5rem; */
.row-gap-24 /* row-gap: 6rem; */
.row-gap-32 /* row-gap: 8rem; */
.row-gap-40 /* row-gap: 10rem; */
.row-gap-48 /* row-gap: 12rem; */
.row-gap-56 /* row-gap: 14rem; */
.row-gap-64 /* row-gap: 16rem; */
.row-gap-px /* row-gap: 1px; */
.col-gap-0 /* column-gap: 0; */
.col-gap-1 /* column-gap: 0.25rem; */
.col-gap-2 /* column-gap: 0.5rem; */
.col-gap-3 /* column-gap: 0.75rem; */
.col-gap-4 /* column-gap: 1rem; */
.col-gap-5 /* column-gap: 1.25rem; */
.col-gap-6 /* column-gap: 1.5rem; */
.col-gap-8 /* column-gap: 2rem; */
.col-gap-10 /* column-gap: 2.5rem; */
.col-gap-12 /* column-gap: 3rem; */
.col-gap-16 /* column-gap: 4rem; */
.col-gap-20 /* column-gap: 5rem; */
.col-gap-24 /* column-gap: 6rem; */
.col-gap-32 /* column-gap: 8rem; */
.col-gap-40 /* column-gap: 10rem; */
.col-gap-48 /* column-gap: 12rem; */
.col-gap-56 /* column-gap: 14rem; */
.col-gap-64 /* column-gap: 16rem; */
.col-gap-px /* column-gap: 1px; */
/*
* Grid Auto Flow
* --------------------
* Utilities for controlling how elements in a grid are auto-placed.
* By default, only responsive variants are generated for grid-auto-flow utilities.
*/
.grid-flow-row /* grid-auto-flow: row; */
.grid-flow-col /* grid-auto-flow: column; */
.grid-flow-row-dense /* grid-auto-flow: row dense; */
.grid-flow-col-dense /* grid-auto-flow: column dense; */
/* *******************************************************************************************
* SPACING
* ******************************************************************************************* */
/*
* Padding
* --------------------
* Utilities for controlling an element's padding.
* By default, only responsive variants are generated for padding utilities.
*/
.p-0 /* padding: 0; */
.p-1 /* padding: 0.25rem; */
.p-2 /* padding: 0.5rem; */
.p-3 /* padding: 0.75rem; */
.p-4 /* padding: 1rem; */
.p-5 /* padding: 1.25rem; */
.p-6 /* padding: 1.5rem; */
.p-8 /* padding: 2rem; */
.p-10 /* padding: 2.5rem; */
.p-12 /* padding: 3rem; */
.p-16 /* padding: 4rem; */
.p-20 /* padding: 5rem; */
.p-24 /* padding: 6rem; */
.p-32 /* padding: 8rem; */
.p-40 /* padding: 10rem; */
.p-48 /* padding: 12rem; */
.p-56 /* padding: 14rem; */
.p-64 /* padding: 16rem; */
.p-px /* padding: 1px; */
.py-0 /* padding-top: 0; padding-bottom: 0; */
.py-1 /* padding-top: 0.25rem; padding-bottom: 0.25rem; */
.py-2 /* padding-top: 0.5rem; padding-bottom: 0.5rem; */
.py-3 /* padding-top: 0.75rem; padding-bottom: 0.75rem; */
.py-4 /* padding-top: 1rem; padding-bottom: 1rem; */
.py-5 /* padding-top: 1.25rem; padding-bottom: 1.25rem; */
.py-6 /* padding-top: 1.5rem; padding-bottom: 1.5rem; */
.py-8 /* padding-top: 2rem; padding-bottom: 2rem; */
.py-10 /* padding-top: 2.5rem; padding-bottom: 2.5rem; */
.py-12 /* padding-top: 3rem; padding-bottom: 3rem; */
.py-16 /* padding-top: 4rem; padding-bottom: 4rem; */
.py-20 /* padding-top: 5rem; padding-bottom: 5rem; */
.py-24 /* padding-top: 6rem; padding-bottom: 6rem; */
.py-32 /* padding-top: 8rem; padding-bottom: 8rem; */
.py-40 /* padding-top: 10rem; padding-bottom: 10rem; */
.py-48 /* padding-top: 12rem; padding-bottom: 12rem; */
.py-56 /* padding-top: 14rem; padding-bottom: 14rem; */
.py-64 /* padding-top: 16rem; padding-bottom: 16rem; */
.py-px /* padding-top: 1px; padding-bottom: 1px; */
.px-0 /* padding-right: 0; padding-left: 0; */
.px-1 /* padding-right: 0.25rem; padding-left: 0.25rem; */
.px-2 /* padding-right: 0.5rem; padding-left: 0.5rem; */
.px-3 /* padding-right: 0.75rem; padding-left: 0.75rem; */
.px-4 /* padding-right: 1rem; padding-left: 1rem; */
.px-5 /* padding-right: 1.25rem; padding-left: 1.25rem; */
.px-6 /* padding-right: 1.5rem; padding-left: 1.5rem; */
.px-8 /* padding-right: 2rem; padding-left: 2rem; */
.px-10 /* padding-right: 2.5rem; padding-left: 2.5rem; */
.px-12 /* padding-right: 3rem; padding-left: 3rem; */
.px-16 /* padding-right: 4rem; padding-left: 4rem; */
.px-20 /* padding-right: 5rem; padding-left: 5rem; */
.px-24 /* padding-right: 6rem; padding-left: 6rem; */
.px-32 /* padding-right: 8rem; padding-left: 8rem; */
.px-40 /* padding-right: 10rem; padding-left: 10rem; */
.px-48 /* padding-right: 12rem; padding-left: 12rem; */
.px-56 /* padding-right: 14rem; padding-left: 14rem; */
.px-64 /* padding-right: 16rem; padding-left: 16rem; */
.px-px /* padding-right: 1px; padding-left: 1px; */
.pt-0 /* padding-top: 0; */
.pt-1 /* padding-top: 0.25rem; */
.pt-2 /* padding-top: 0.5rem; */
.pt-3 /* padding-top: 0.75rem; */
.pt-4 /* padding-top: 1rem; */
.pt-5 /* padding-top: 1.25rem; */
.pt-6 /* padding-top: 1.5rem; */
.pt-8 /* padding-top: 2rem; */
.pt-10 /* padding-top: 2.5rem; */
.pt-12 /* padding-top: 3rem; */
.pt-16 /* padding-top: 4rem; */
.pt-20 /* padding-top: 5rem; */
.pt-24 /* padding-top: 6rem; */
.pt-32 /* padding-top: 8rem; */
.pt-40 /* padding-top: 10rem; */
.pt-48 /* padding-top: 12rem; */
.pt-56 /* padding-top: 14rem; */
.pt-64 /* padding-top: 16rem; */
.pt-px /* padding-top: 1px; */
.pr-0 /* padding-right: 0; */
.pr-1 /* padding-right: 0.25rem; */
.pr-2 /* padding-right: 0.5rem; */
.pr-3 /* padding-right: 0.75rem; */
.pr-4 /* padding-right: 1rem; */
.pr-5 /* padding-right: 1.25rem; */
.pr-6 /* padding-right: 1.5rem; */
.pr-8 /* padding-right: 2rem; */
.pr-10 /* padding-right: 2.5rem; */
.pr-12 /* padding-right: 3rem; */
.pr-16 /* padding-right: 4rem; */
.pr-20 /* padding-right: 5rem; */
.pr-24 /* padding-right: 6rem; */
.pr-32 /* padding-right: 8rem; */
.pr-40 /* padding-right: 10rem; */
.pr-48 /* padding-right: 12rem; */
.pr-56 /* padding-right: 14rem; */
.pr-64 /* padding-right: 16rem; */
.pr-px /* padding-right: 1px; */
.pb-0 /* padding-bottom: 0; */
.pb-1 /* padding-bottom: 0.25rem; */
.pb-2 /* padding-bottom: 0.5rem; */
.pb-3 /* padding-bottom: 0.75rem; */
.pb-4 /* padding-bottom: 1rem; */
.pb-5 /* padding-bottom: 1.25rem; */
.pb-6 /* padding-bottom: 1.5rem; */
.pb-8 /* padding-bottom: 2rem; */
.pb-10 /* padding-bottom: 2.5rem; */
.pb-12 /* padding-bottom: 3rem; */
.pb-16 /* padding-bottom: 4rem; */
.pb-20 /* padding-bottom: 5rem; */
.pb-24 /* padding-bottom: 6rem; */
.pb-32 /* padding-bottom: 8rem; */
.pb-40 /* padding-bottom: 10rem; */
.pb-48 /* padding-bottom: 12rem; */
.pb-56 /* padding-bottom: 14rem; */
.pb-64 /* padding-bottom: 16rem; */
.pb-px /* padding-bottom: 1px; */
.pl-0 /* padding-left: 0; */
.pl-1 /* padding-left: 0.25rem; */
.pl-2 /* padding-left: 0.5rem; */
.pl-3 /* padding-left: 0.75rem; */
.pl-4 /* padding-left: 1rem; */
.pl-5 /* padding-left: 1.25rem; */
.pl-6 /* padding-left: 1.5rem; */
.pl-8 /* padding-left: 2rem; */
.pl-10 /* padding-left: 2.5rem; */
.pl-12 /* padding-left: 3rem; */
.pl-16 /* padding-left: 4rem; */
.pl-20 /* padding-left: 5rem; */
.pl-24 /* padding-left: 6rem; */
.pl-32 /* padding-left: 8rem; */
.pl-40 /* padding-left: 10rem; */
.pl-48 /* padding-left: 12rem; */
.pl-56 /* padding-left: 14rem; */
.pl-64 /* padding-left: 16rem; */
.pl-px /* padding-left: 1px; */
/*
* Margin
* --------------------
* Utilities for controlling an element's margin.
* By default, only responsive variants are generated for margin utilities.
*/
.m-0 /* margin: 0; */
.m-1 /* margin: 0.25rem; */
.m-2 /* margin: 0.5rem; */
.m-3 /* margin: 0.75rem; */
.m-4 /* margin: 1rem; */
.m-5 /* margin: 1.25rem; */
.m-6 /* margin: 1.5rem; */
.m-8 /* margin: 2rem; */
.m-10 /* margin: 2.5rem; */
.m-12 /* margin: 3rem; */
.m-16 /* margin: 4rem; */
.m-20 /* margin: 5rem; */
.m-24 /* margin: 6rem; */
.m-32 /* margin: 8rem; */
.m-40 /* margin: 10rem; */
.m-48 /* margin: 12rem; */
.m-56 /* margin: 14rem; */
.m-64 /* margin: 16rem; */
.m-auto /* margin: auto; */
.m-px /* margin: 1px; */
.-m-1 /* margin: -0.25rem; */
.-m-2 /* margin: -0.5rem; */
.-m-3 /* margin: -0.75rem; */
.-m-4 /* margin: -1rem; */
.-m-5 /* margin: -1.25rem; */
.-m-6 /* margin: -1.5rem; */
.-m-8 /* margin: -2rem; */
.-m-10 /* margin: -2.5rem; */
.-m-12 /* margin: -3rem; */
.-m-16 /* margin: -4rem; */
.-m-20 /* margin: -5rem; */
.-m-24 /* margin: -6rem; */
.-m-32 /* margin: -8rem; */
.-m-40 /* margin: -10rem; */
.-m-48 /* margin: -12rem; */
.-m-56 /* margin: -14rem; */
.-m-64 /* margin: -16rem; */
.-m-px /* margin: -1px; */
.my-0 /* margin-top: 0; margin-bottom: 0; */
.my-1 /* margin-top: 0.25rem; margin-bottom: 0.25rem; */
.my-2 /* margin-top: 0.5rem; margin-bottom: 0.5rem; */
.my-3 /* margin-top: 0.75rem; margin-bottom: 0.75rem; */
.my-4 /* margin-top: 1rem; margin-bottom: 1rem; */
.my-5 /* margin-top: 1.25rem; margin-bottom: 1.25rem; */
.my-6 /* margin-top: 1.5rem; margin-bottom: 1.5rem; */
.my-8 /* margin-top: 2rem; margin-bottom: 2rem; */
.my-10 /* margin-top: 2.5rem; margin-bottom: 2.5rem; */
.my-12 /* margin-top: 3rem; margin-bottom: 3rem; */
.my-16 /* margin-top: 4rem; margin-bottom: 4rem; */
.my-20 /* margin-top: 5rem; margin-bottom: 5rem; */
.my-24 /* margin-top: 6rem; margin-bottom: 6rem; */
.my-32 /* margin-top: 8rem; margin-bottom: 8rem; */
.my-40 /* margin-top: 10rem; margin-bottom: 10rem; */
.my-48 /* margin-top: 12rem; margin-bottom: 12rem; */
.my-56 /* margin-top: 14rem; margin-bottom: 14rem; */
.my-64 /* margin-top: 16rem; margin-bottom: 16rem; */
.my-auto /* margin-top: auto; margin-bottom: auto; */
.my-px /* margin-top: 1px; margin-bottom: 1px; */
.-my-1 /* margin-top: -0.25rem; margin-bottom: -0.25rem; */
.-my-2 /* margin-top: -0.5rem; margin-bottom: -0.5rem; */
.-my-3 /* margin-top: -0.75rem; margin-bottom: -0.75rem; */
.-my-4 /* margin-top: -1rem; margin-bottom: -1rem; */
.-my-5 /* margin-top: -1.25rem; margin-bottom: -1.25rem; */
.-my-6 /* margin-top: -1.5rem; margin-bottom: -1.5rem; */
.-my-8 /* margin-top: -2rem; margin-bottom: -2rem; */
.-my-10 /* margin-top: -2.5rem; margin-bottom: -2.5rem; */
.-my-12 /* margin-top: -3rem; margin-bottom: -3rem; */
.-my-16 /* margin-top: -4rem; margin-bottom: -4rem; */
.-my-20 /* margin-top: -5rem; margin-bottom: -5rem; */
.-my-24 /* margin-top: -6rem; margin-bottom: -6rem; */
.-my-32 /* margin-top: -8rem; margin-bottom: -8rem; */
.-my-40 /* margin-top: -10rem; margin-bottom: -10rem; */
.-my-48 /* margin-top: -12rem; margin-bottom: -12rem; */
.-my-56 /* margin-top: -14rem; margin-bottom: -14rem; */
.-my-64 /* margin-top: -16rem; margin-bottom: -16rem; */
.-my-px /* margin-top: -1px; margin-bottom: -1px; */
.mx-0 /* margin-right: 0; margin-left: 0; */
.mx-1 /* margin-right: 0.25rem; margin-left: 0.25rem; */
.mx-2 /* margin-right: 0.5rem; margin-left: 0.5rem; */
.mx-3 /* margin-right: 0.75rem; margin-left: 0.75rem; */
.mx-4 /* margin-right: 1rem; margin-left: 1rem; */
.mx-5 /* margin-right: 1.25rem; margin-left: 1.25rem; */
.mx-6 /* margin-right: 1.5rem; margin-left: 1.5rem; */
.mx-8 /* margin-right: 2rem; margin-left: 2rem; */
.mx-10 /* margin-right: 2.5rem; margin-left: 2.5rem; */
.mx-12 /* margin-right: 3rem; margin-left: 3rem; */
.mx-16 /* margin-right: 4rem; margin-left: 4rem; */
.mx-20 /* margin-right: 5rem; margin-left: 5rem; */
.mx-24 /* margin-right: 6rem; margin-left: 6rem; */
.mx-32 /* margin-right: 8rem; margin-left: 8rem; */
.mx-40 /* margin-right: 10rem; margin-left: 10rem; */
.mx-48 /* margin-right: 12rem; margin-left: 12rem; */
.mx-56 /* margin-right: 14rem; margin-left: 14rem; */
.mx-64 /* margin-right: 16rem; margin-left: 16rem; */
.mx-auto /* margin-right: auto; margin-left: auto; */
.mx-px /* margin-right: 1px; margin-left: 1px; */
.-mx-1 /* margin-right: -0.25rem; margin-left: -0.25rem; */
.-mx-2 /* margin-right: -0.5rem; margin-left: -0.5rem; */
.-mx-3 /* margin-right: -0.75rem; margin-left: -0.75rem; */
.-mx-4 /* margin-right: -1rem; margin-left: -1rem; */
.-mx-5 /* margin-right: -1.25rem; margin-left: -1.25rem; */
.-mx-6 /* margin-right: -1.5rem; margin-left: -1.5rem; */
.-mx-8 /* margin-right: -2rem; margin-left: -2rem; */
.-mx-10 /* margin-right: -2.5rem; margin-left: -2.5rem; */
.-mx-12 /* margin-right: -3rem; margin-left: -3rem; */
.-mx-16 /* margin-right: -4rem; margin-left: -4rem; */
.-mx-20 /* margin-right: -5rem; margin-left: -5rem; */
.-mx-24 /* margin-right: -6rem; margin-left: -6rem; */
.-mx-32 /* margin-right: -8rem; margin-left: -8rem; */
.-mx-40 /* margin-right: -10rem; margin-left: -10rem; */
.-mx-48 /* margin-right: -12rem; margin-left: -12rem; */
.-mx-56 /* margin-right: -14rem; margin-left: -14rem; */
.-mx-64 /* margin-right: -16rem; margin-left: -16rem; */
.-mx-px /* margin-right: -1px; margin-left: -1px; */
.mt-0 /* margin-top: 0; */
.mt-1 /* margin-top: 0.25rem; */
.mt-2 /* margin-top: 0.5rem; */
.mt-3 /* margin-top: 0.75rem; */
.mt-4 /* margin-top: 1rem; */
.mt-5 /* margin-top: 1.25rem; */
.mt-6 /* margin-top: 1.5rem; */
.mt-8 /* margin-top: 2rem; */
.mt-10 /* margin-top: 2.5rem; */
.mt-12 /* margin-top: 3rem; */
.mt-16 /* margin-top: 4rem; */
.mt-20 /* margin-top: 5rem; */
.mt-24 /* margin-top: 6rem; */
.mt-32 /* margin-top: 8rem; */
.mt-40 /* margin-top: 10rem; */
.mt-48 /* margin-top: 12rem; */
.mt-56 /* margin-top: 14rem; */
.mt-64 /* margin-top: 16rem; */
.mt-auto /* margin-top: auto; */
.mt-px /* margin-top: 1px; */
.-mt-1 /* margin-top: -0.25rem; */
.-mt-2 /* margin-top: -0.5rem; */
.-mt-3 /* margin-top: -0.75rem; */
.-mt-4 /* margin-top: -1rem; */
.-mt-5 /* margin-top: -1.25rem; */
.-mt-6 /* margin-top: -1.5rem; */
.-mt-8 /* margin-top: -2rem; */
.-mt-10 /* margin-top: -2.5rem; */
.-mt-12 /* margin-top: -3rem; */
.-mt-16 /* margin-top: -4rem; */
.-mt-20 /* margin-top: -5rem; */
.-mt-24 /* margin-top: -6rem; */
.-mt-32 /* margin-top: -8rem; */
.-mt-40 /* margin-top: -10rem; */
.-mt-48 /* margin-top: -12rem; */
.-mt-56 /* margin-top: -14rem; */
.-mt-64 /* margin-top: -16rem; */
.-mt-px /* margin-top: -1px; */
.mr-0 /* margin-right: 0; */
.mr-1 /* margin-right: 0.25rem; */
.mr-2 /* margin-right: 0.5rem; */
.mr-3 /* margin-right: 0.75rem; */
.mr-4 /* margin-right: 1rem; */
.mr-5 /* margin-right: 1.25rem; */
.mr-6 /* margin-right: 1.5rem; */
.mr-8 /* margin-right: 2rem; */
.mr-10 /* margin-right: 2.5rem; */
.mr-12 /* margin-right: 3rem; */
.mr-16 /* margin-right: 4rem; */
.mr-20 /* margin-right: 5rem; */
.mr-24 /* margin-right: 6rem; */
.mr-32 /* margin-right: 8rem; */
.mr-40 /* margin-right: 10rem; */
.mr-48 /* margin-right: 12rem; */
.mr-56 /* margin-right: 14rem; */
.mr-64 /* margin-right: 16rem; */
.mr-auto /* margin-right: auto; */
.mr-px /* margin-right: 1px; */
.-mr-1 /* margin-right: -0.25rem; */
.-mr-2 /* margin-right: -0.5rem; */
.-mr-3 /* margin-right: -0.75rem; */
.-mr-4 /* margin-right: -1rem; */
.-mr-5 /* margin-right: -1.25rem; */
.-mr-6 /* margin-right: -1.5rem; */
.-mr-8 /* margin-right: -2rem; */
.-mr-10 /* margin-right: -2.5rem; */
.-mr-12 /* margin-right: -3rem; */
.-mr-16 /* margin-right: -4rem; */
.-mr-20 /* margin-right: -5rem; */
.-mr-24 /* margin-right: -6rem; */
.-mr-32 /* margin-right: -8rem; */
.-mr-40 /* margin-right: -10rem; */
.-mr-48 /* margin-right: -12rem; */
.-mr-56 /* margin-right: -14rem; */
.-mr-64 /* margin-right: -16rem; */
.-mr-px /* margin-right: -1px; */
.mb-0 /* margin-bottom: 0; */
.mb-1 /* margin-bottom: 0.25rem; */
.mb-2 /* margin-bottom: 0.5rem; */
.mb-3 /* margin-bottom: 0.75rem; */
.mb-4 /* margin-bottom: 1rem; */
.mb-5 /* margin-bottom: 1.25rem; */
.mb-6 /* margin-bottom: 1.5rem; */
.mb-8 /* margin-bottom: 2rem; */
.mb-10 /* margin-bottom: 2.5rem; */
.mb-12 /* margin-bottom: 3rem; */
.mb-16 /* margin-bottom: 4rem; */
.mb-20 /* margin-bottom: 5rem; */
.mb-24 /* margin-bottom: 6rem; */
.mb-32 /* margin-bottom: 8rem; */
.mb-40 /* margin-bottom: 10rem; */
.mb-48 /* margin-bottom: 12rem; */
.mb-56 /* margin-bottom: 14rem; */
.mb-64 /* margin-bottom: 16rem; */
.mb-auto /* margin-bottom: auto; */
.mb-px /* margin-bottom: 1px; */
.-mb-1 /* margin-bottom: -0.25rem; */
.-mb-2 /* margin-bottom: -0.5rem; */
.-mb-3 /* margin-bottom: -0.75rem; */
.-mb-4 /* margin-bottom: -1rem; */
.-mb-5 /* margin-bottom: -1.25rem; */
.-mb-6 /* margin-bottom: -1.5rem; */
.-mb-8 /* margin-bottom: -2rem; */
.-mb-10 /* margin-bottom: -2.5rem; */
.-mb-12 /* margin-bottom: -3rem; */
.-mb-16 /* margin-bottom: -4rem; */
.-mb-20 /* margin-bottom: -5rem; */
.-mb-24 /* margin-bottom: -6rem; */
.-mb-32 /* margin-bottom: -8rem; */
.-mb-40 /* margin-bottom: -10rem; */
.-mb-48 /* margin-bottom: -12rem; */
.-mb-56 /* margin-bottom: -14rem; */
.-mb-64 /* margin-bottom: -16rem; */
.-mb-px /* margin-bottom: -1px; */
.ml-0 /* margin-left: 0; */
.ml-1 /* margin-left: 0.25rem; */
.ml-2 /* margin-left: 0.5rem; */
.ml-3 /* margin-left: 0.75rem; */
.ml-4 /* margin-left: 1rem; */
.ml-5 /* margin-left: 1.25rem; */
.ml-6 /* margin-left: 1.5rem; */
.ml-8 /* margin-left: 2rem; */
.ml-10 /* margin-left: 2.5rem; */
.ml-12 /* margin-left: 3rem; */
.ml-16 /* margin-left: 4rem; */
.ml-20 /* margin-left: 5rem; */
.ml-24 /* margin-left: 6rem; */
.ml-32 /* margin-left: 8rem; */
.ml-40 /* margin-left: 10rem; */
.ml-48 /* margin-left: 12rem; */
.ml-56 /* margin-left: 14rem; */
.ml-64 /* margin-left: 16rem; */
.ml-auto /* margin-left: auto; */
.ml-px /* margin-left: 1px; */
.-ml-1 /* margin-left: -0.25rem; */
.-ml-2 /* margin-left: -0.5rem; */
.-ml-3 /* margin-left: -0.75rem; */
.-ml-4 /* margin-left: -1rem; */
.-ml-5 /* margin-left: -1.25rem; */
.-ml-6 /* margin-left: -1.5rem; */
.-ml-8 /* margin-left: -2rem; */
.-ml-10 /* margin-left: -2.5rem; */
.-ml-12 /* margin-left: -3rem; */
.-ml-16 /* margin-left: -4rem; */
.-ml-20 /* margin-left: -5rem; */
.-ml-24 /* margin-left: -6rem; */
.-ml-32 /* margin-left: -8rem; */
.-ml-40 /* margin-left: -10rem; */
.-ml-48 /* margin-left: -12rem; */
.-ml-56 /* margin-left: -14rem; */
.-ml-64 /* margin-left: -16rem; */
.-ml-px /* margin-left: -1px; */
/* *******************************************************************************************
* SIZING
* ******************************************************************************************* */
/*
* Width
* --------------------
* Utilities for setting the width of an element
* By default, only responsive variants are generated for width utilities.
*/
.w-0 /* width: 0; */
.w-1 /* width: 0.25rem; */
.w-2 /* width: 0.5rem; */
.w-3 /* width: 0.75rem; */
.w-4 /* width: 1rem; */
.w-5 /* width: 1.25rem; */
.w-6 /* width: 1.5rem; */
.w-8 /* width: 2rem; */
.w-10 /* width: 2.5rem; */
.w-12 /* width: 3rem; */
.w-16 /* width: 4rem; */
.w-20 /* width: 5rem; */
.w-24 /* width: 6rem; */
.w-32 /* width: 8rem; */
.w-40 /* width: 10rem; */
.w-48 /* width: 12rem; */
.w-56 /* width: 14rem; */
.w-64 /* width: 16rem; */
.w-auto /* width: auto; */
.w-px /* width: 1px; */
.w-1/2 /* width: 50%; */
.w-1/3 /* width: 33.333333%; */
.w-2/3 /* width: 66.666667%; */
.w-1/4 /* width: 25%; */
.w-2/4 /* width: 50%; */
.w-3/4 /* width: 75%; */
.w-1/5 /* width: 20%; */
.w-2/5 /* width: 40%; */
.w-3/5 /* width: 60%; */
.w-4/5 /* width: 80%; */
.w-1/6 /* width: 16.666667%; */
.w-2/6 /* width: 33.333333%; */
.w-3/6 /* width: 50%; */
.w-4/6 /* width: 66.666667%; */
.w-5/6 /* width: 83.333333%; */
.w-1/12 /* width: 8.333333%; */
.w-2/12 /* width: 16.666667%; */
.w-3/12 /* width: 25%; */
.w-4/12 /* width: 33.333333%; */
.w-5/12 /* width: 41.666667%; */
.w-6/12 /* width: 50%; */
.w-7/12 /* width: 58.333333%; */
.w-8/12 /* width: 66.666667%; */
.w-9/12 /* width: 75%; */
.w-10/12 /* width: 83.333333%; */
.w-11/12 /* width: 91.666667%; */
.w-full /* width: 100%; */
.w-screen /* width: 100vw; */
/*
* Min-Width
* --------------------
* Utilities for setting the minimum width of an element
* By default, only responsive variants are generated for min-width utilities.
*/
.min-w-0 /* min-width: 0; */
.min-w-full /* min-width: 100%; */
/*
* Max-Width
* --------------------
* Utilities for setting the maximum width of an element
* By default, only responsive variants are generated for max-width utilities.
*/
.max-w-xs /* max-width: 20rem; */
.max-w-sm /* max-width: 24rem; */
.max-w-md /* max-width: 28rem; */
.max-w-lg /* max-width: 32rem; */
.max-w-xl /* max-width: 36rem; */
.max-w-2xl /* max-width: 42rem; */
.max-w-3xl /* max-width: 48rem; */
.max-w-4xl /* max-width: 56rem; */
.max-w-5xl /* max-width: 64rem; */
.max-w-6xl /* max-width: 72rem; */
.max-w-full /* max-width: 100%; */
.max-w-screen-sm /* max-width: 640px; */
.max-w-screen-md /* max-width: 768px; */
.max-w-screen-lg /* max-width: 1024px; */
.max-w-screen-xl /* max-width: 1280px; */
.max-w-none /* max-width: none; */
/*
* Height
* --------------------
* Utilities for setting the height of an element
* By default, only responsive variants are generated for height utilities.
*/
.h-0 /* height: 0; */
.h-1 /* height: 0.25rem; */
.h-2 /* height: 0.5rem; */
.h-3 /* height: 0.75rem; */
.h-4 /* height: 1rem; */
.h-5 /* height: 1.25rem; */
.h-6 /* height: 1.5rem; */
.h-8 /* height: 2rem; */
.h-10 /* height: 2.5rem; */
.h-12 /* height: 3rem; */
.h-16 /* height: 4rem; */
.h-20 /* height: 5rem; */
.h-24 /* height: 6rem; */
.h-32 /* height: 8rem; */
.h-40 /* height: 10rem; */
.h-48 /* height: 12rem; */
.h-56 /* height: 14rem; */
.h-64 /* height: 16rem; */
.h-auto /* height: auto; */
.h-px /* height: 1px; */
.h-full /* height: 100%; */
.h-screen /* height: 100vh; */
/*
* Min-Height
* --------------------
* Utilities for setting the minimum height of an element
* By default, only responsive variants are generated for min-height utilities.
*/
.min-h-0 /* min-height: 0; */
.min-h-full /* min-height: 100%; */
.min-h-screen /* min-height: 100vh; */
/*
* Max-Height
* --------------------
* Utilities for setting the maximum height of an element
* By default, only responsive variants are generated for max-height utilities.
*/
.max-h-full /* max-height: 100%; */
.max-h-screen /* max-height: 100vh; */
/* *******************************************************************************************
* TYPOGRAPHY
* ******************************************************************************************* */
/*
* Font Family
* --------------------
* Utilities for controlling the font family of an element.
* By default, only responsive variants are generated for font family utilities.
*/
.font-sans /* font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; */
.font-serif /* font-family: Georgia, Cambria, "Times New Roman", Times, serif; */
.font-mono /* font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; */
/*
* Font Size
* --------------------
* Utilities for controlling the font size of an element.
* By default, only responsive variants are generated for text sizing utilities.
*/
.text-xs /* font-size: .75rem; */
.text-sm /* font-size: .875rem; */
.text-base /* font-size: 1rem; */
.text-lg /* font-size: 1.125rem; */
.text-xl /* font-size: 1.25rem; */
.text-2xl /* font-size: 1.5rem; */
.text-3xl /* font-size: 1.875rem; */
.text-4xl /* font-size: 2.25rem; */
.text-5xl /* font-size: 3rem; */
.text-6xl /* font-size: 4rem; */
/*
* Font Smoothing
* --------------------
* Utilities for controlling the font smoothing of an element.
* By default, only responsive variants are generated for font smoothing utilities.
*/
.antialiased /* -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; */
.subpixel-antialiased /* -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; */
/*
* Font Style
* --------------------
* Utilities for controlling the style of text.
* By default, only responsive variants are generated for font style utilities.
*/
.italic /* font-style: italic; */
.not-italic /* font-style: normal; */
/*
* Font Weight
* --------------------
* Utilities for controlling the font weight of an element.
* By default, only responsive, hover and focus variants are generated for font weight utilities.
*/
.font-hairline /* font-weight: 100; */
.font-thin /* font-weight: 200; */
.font-light /* font-weight: 300; */
.font-normal /* font-weight: 400; */
.font-medium /* font-weight: 500; */
.font-semibold /* font-weight: 600; */
.font-bold /* font-weight: 700; */
.font-extrabold /* font-weight: 800; */
.font-black /* font-weight: 900; */
/*
* Letter Spacing
* --------------------
* Utilities for controlling the tracking (letter spacing) of an element.
* By default, only responsive variants are generated for tracking utilities.
*/
.tracking-tighter /* letter-spacing: -0.05em; */
.tracking-tight /* letter-spacing: -0.025em; */
.tracking-normal /* letter-spacing: 0; */
.tracking-wide /* letter-spacing: 0.025em; */
.tracking-wider /* letter-spacing: 0.05em; */
.tracking-widest /* letter-spacing: 0.1em; */
/*
* Line Height
* --------------------
* Utilities for controlling the leading (line height) of an element.
* By default, only responsive variants are generated for line height utilities.
*/
.leading-none /* line-height: 1; */
.leading-tight /* line-height: 1.25; */
.leading-snug /* line-height: 1.375; */
.leading-normal /* line-height: 1.5; */
.leading-relaxed /* line-height: 1.625; */
.leading-loose /* line-height: 2; */
.leading-3 /* line-height: .75rem; */
.leading-4 /* line-height: 1rem; */
.leading-5 /* line-height: 1.25rem; */
.leading-6 /* line-height: 1.5rem; */
.leading-7 /* line-height: 1.75rem; */
.leading-8 /* line-height: 2rem; */
.leading-9 /* line-height: 2.25rem; */
.leading-10 /* line-height: 2.5rem; */
/*
* List Style Type
* --------------------
* Utilities for controlling the bullet/number style of a list.
* By default, only responsive variants are generated for list style type utilities.
*/
.list-none /* list-style-type: none; */
.list-disc /* list-style-type: disc; */
.list-decimal /* list-style-type: decimal; */
/*
* List Style Position
* --------------------
* Utilities for controlling the position of bullets/numbers in lists.
* By default, only responsive variants are generated for list style position utilities.
*/
.list-inside /* list-style-position: inside; */
.list-outside /* list-style-position: outside; */
/*
* Placeholder Color
* --------------------
* Utilities for controlling the color of placeholder text.
* By default, only responsive and focus variants are generated for placeholder color utilities.
*/
.placeholder-transparent /* ::placeholder { color: transparent; } */
.placeholder-black /* ::placeholder { color: #000; } */
.placeholder-white /* ::placeholder { color: #fff; } */
.placeholder-gray-100 /* ::placeholder { color: #f7fafc; } */
.placeholder-gray-200 /* ::placeholder { color: #edf2f7; } */
.placeholder-gray-300 /* ::placeholder { color: #e2e8f0; } */
.placeholder-gray-400 /* ::placeholder { color: #cbd5e0; } */
.placeholder-gray-500 /* ::placeholder { color: #a0aec0; } */
.placeholder-gray-600 /* ::placeholder { color: #718096; } */
.placeholder-gray-700 /* ::placeholder { color: #4a5568; } */
.placeholder-gray-800 /* ::placeholder { color: #2d3748; } */
.placeholder-gray-900 /* ::placeholder { color: #1a202c; } */
.placeholder-red-100 /* ::placeholder { color: #fff5f5; } */
.placeholder-red-200 /* ::placeholder { color: #fed7d7; } */
.placeholder-red-300 /* ::placeholder { color: #feb2b2; } */
.placeholder-red-400 /* ::placeholder { color: #fc8181; } */
.placeholder-red-500 /* ::placeholder { color: #f56565; } */
.placeholder-red-600 /* ::placeholder { color: #e53e3e; } */
.placeholder-red-700 /* ::placeholder { color: #c53030; } */
.placeholder-red-800 /* ::placeholder { color: #9b2c2c; } */
.placeholder-red-900 /* ::placeholder { color: #742a2a; } */
.placeholder-orange-100 /* ::placeholder { color: #fffaf0; } */
.placeholder-orange-200 /* ::placeholder { color: #feebc8; } */
.placeholder-orange-300 /* ::placeholder { color: #fbd38d; } */
.placeholder-orange-400 /* ::placeholder { color: #f6ad55; } */
.placeholder-orange-500 /* ::placeholder { color: #ed8936; } */
.placeholder-orange-600 /* ::placeholder { color: #dd6b20; } */
.placeholder-orange-700 /* ::placeholder { color: #c05621; } */
.placeholder-orange-800 /* ::placeholder { color: #9c4221; } */
.placeholder-orange-900 /* ::placeholder { color: #7b341e; } */
.placeholder-yellow-100 /* ::placeholder { color: #fffff0; } */
.placeholder-yellow-200 /* ::placeholder { color: #fefcbf; } */
.placeholder-yellow-300 /* ::placeholder { color: #faf089; } */
.placeholder-yellow-400 /* ::placeholder { color: #f6e05e; } */
.placeholder-yellow-500 /* ::placeholder { color: #ecc94b; } */
.placeholder-yellow-600 /* ::placeholder { color: #d69e2e; } */
.placeholder-yellow-700 /* ::placeholder { color: #b7791f; } */
.placeholder-yellow-800 /* ::placeholder { color: #975a16; } */
.placeholder-yellow-900 /* ::placeholder { color: #744210; } */
.placeholder-green-100 /* ::placeholder { color: #f0fff4; } */
.placeholder-green-200 /* ::placeholder { color: #c6f6d5; } */
.placeholder-green-300 /* ::placeholder { color: #9ae6b4; } */
.placeholder-green-400 /* ::placeholder { color: #68d391; } */
.placeholder-green-500 /* ::placeholder { color: #48bb78; } */
.placeholder-green-600 /* ::placeholder { color: #38a169; } */
.placeholder-green-700 /* ::placeholder { color: #2f855a; } */
.placeholder-green-800 /* ::placeholder { color: #276749; } */
.placeholder-green-900 /* ::placeholder { color: #22543d; } */
.placeholder-teal-100 /* ::placeholder { color: #e6fffa; } */
.placeholder-teal-200 /* ::placeholder { color: #b2f5ea; } */
.placeholder-teal-300 /* ::placeholder { color: #81e6d9; } */
.placeholder-teal-400 /* ::placeholder { color: #4fd1c5; } */
.placeholder-teal-500 /* ::placeholder { color: #38b2ac; } */
.placeholder-teal-600 /* ::placeholder { color: #319795; } */
.placeholder-teal-700 /* ::placeholder { color: #2c7a7b; } */
.placeholder-teal-800 /* ::placeholder { color: #285e61; } */
.placeholder-teal-900 /* ::placeholder { color: #234e52; } */
.placeholder-blue-100 /* ::placeholder { color: #ebf8ff; } */
.placeholder-blue-200 /* ::placeholder { color: #bee3f8; } */
.placeholder-blue-300 /* ::placeholder { color: #90cdf4; } */
.placeholder-blue-400 /* ::placeholder { color: #63b3ed; } */
.placeholder-blue-500 /* ::placeholder { color: #4299e1; } */
.placeholder-blue-600 /* ::placeholder { color: #3182ce; } */
.placeholder-blue-700 /* ::placeholder { color: #2b6cb0; } */
.placeholder-blue-800 /* ::placeholder { color: #2c5282; } */
.placeholder-blue-900 /* ::placeholder { color: #2a4365; } */
.placeholder-indigo-100 /* ::placeholder { color: #ebf4ff; } */
.placeholder-indigo-200 /* ::placeholder { color: #c3dafe; } */
.placeholder-indigo-300 /* ::placeholder { color: #a3bffa; } */
.placeholder-indigo-400 /* ::placeholder { color: #7f9cf5; } */
.placeholder-indigo-500 /* ::placeholder { color: #667eea; } */
.placeholder-indigo-600 /* ::placeholder { color: #5a67d8; } */
.placeholder-indigo-700 /* ::placeholder { color: #4c51bf; } */
.placeholder-indigo-800 /* ::placeholder { color: #434190; } */
.placeholder-indigo-900 /* ::placeholder { color: #3c366b; } */
.placeholder-purple-100 /* ::placeholder { color: #faf5ff; } */
.placeholder-purple-200 /* ::placeholder { color: #e9d8fd; } */
.placeholder-purple-300 /* ::placeholder { color: #d6bcfa; } */
.placeholder-purple-400 /* ::placeholder { color: #b794f4; } */
.placeholder-purple-500 /* ::placeholder { color: #9f7aea; } */
.placeholder-purple-600 /* ::placeholder { color: #805ad5; } */
.placeholder-purple-700 /* ::placeholder { color: #6b46c1; } */
.placeholder-purple-800 /* ::placeholder { color: #553c9a; } */
.placeholder-purple-900 /* ::placeholder { color: #44337a; } */
.placeholder-pink-100 /* ::placeholder { color: #fff5f7; } */
.placeholder-pink-200 /* ::placeholder { color: #fed7e2; } */
.placeholder-pink-300 /* ::placeholder { color: #fbb6ce; } */
.placeholder-pink-400 /* ::placeholder { color: #f687b3; } */
.placeholder-pink-500 /* ::placeholder { color: #ed64a6; } */
.placeholder-pink-600 /* ::placeholder { color: #d53f8c; } */
.placeholder-pink-700 /* ::placeholder { color: #b83280; } */
.placeholder-pink-800 /* ::placeholder { color: #97266d; } */
.placeholder-pink-900 /* ::placeholder { color: #702459; } */
/*
* Text Align
* --------------------
* Utilities for controlling the alignment of text.
* By default, only responsive variants are generated for text alignment utilities.
*/
.text-left /* text-align: left; */
.text-center /* text-align: center; */
.text-right /* text-align: right; */
.text-justify /* text-align: justify; */
/*
* Text Color
* --------------------
* Utilities for controlling the text color of an element.
* By default, only responsive, hover and focus variants are generated for text color utilities.
*/
.text-transparent /* color: transparent; */
.text-black /* color: #000; */
.text-white /* color: #fff; */
.text-gray-100 /* color: #f7fafc; */
.text-gray-200 /* color: #edf2f7; */
.text-gray-300 /* color: #e2e8f0; */
.text-gray-400 /* color: #cbd5e0; */
.text-gray-500 /* color: #a0aec0; */
.text-gray-600 /* color: #718096; */
.text-gray-700 /* color: #4a5568; */
.text-gray-800 /* color: #2d3748; */
.text-gray-900 /* color: #1a202c; */
.text-red-100 /* color: #fff5f5; */
.text-red-200 /* color: #fed7d7; */
.text-red-300 /* color: #feb2b2; */
.text-red-400 /* color: #fc8181; */
.text-red-500 /* color: #f56565; */
.text-red-600 /* color: #e53e3e; */
.text-red-700 /* color: #c53030; */
.text-red-800 /* color: #9b2c2c; */
.text-red-900 /* color: #742a2a; */
.text-orange-100 /* color: #fffaf0; */
.text-orange-200 /* color: #feebc8; */
.text-orange-300 /* color: #fbd38d; */
.text-orange-400 /* color: #f6ad55; */
.text-orange-500 /* color: #ed8936; */
.text-orange-600 /* color: #dd6b20; */
.text-orange-700 /* color: #c05621; */
.text-orange-800 /* color: #9c4221; */
.text-orange-900 /* color: #7b341e; */
.text-yellow-100 /* color: #fffff0; */
.text-yellow-200 /* color: #fefcbf; */
.text-yellow-300 /* color: #faf089; */
.text-yellow-400 /* color: #f6e05e; */
.text-yellow-500 /* color: #ecc94b; */
.text-yellow-600 /* color: #d69e2e; */
.text-yellow-700 /* color: #b7791f; */
.text-yellow-800 /* color: #975a16; */
.text-yellow-900 /* color: #744210; */
.text-green-100 /* color: #f0fff4; */
.text-green-200 /* color: #c6f6d5; */
.text-green-300 /* color: #9ae6b4; */
.text-green-400 /* color: #68d391; */
.text-green-500 /* color: #48bb78; */
.text-green-600 /* color: #38a169; */
.text-green-700 /* color: #2f855a; */
.text-green-800 /* color: #276749; */
.text-green-900 /* color: #22543d; */
.text-teal-100 /* color: #e6fffa; */
.text-teal-200 /* color: #b2f5ea; */
.text-teal-300 /* color: #81e6d9; */
.text-teal-400 /* color: #4fd1c5; */
.text-teal-500 /* color: #38b2ac; */
.text-teal-600 /* color: #319795; */
.text-teal-700 /* color: #2c7a7b; */
.text-teal-800 /* color: #285e61; */
.text-teal-900 /* color: #234e52; */
.text-blue-100 /* color: #ebf8ff; */
.text-blue-200 /* color: #bee3f8; */
.text-blue-300 /* color: #90cdf4; */
.text-blue-400 /* color: #63b3ed; */
.text-blue-500 /* color: #4299e1; */
.text-blue-600 /* color: #3182ce; */
.text-blue-700 /* color: #2b6cb0; */
.text-blue-800 /* color: #2c5282; */
.text-blue-900 /* color: #2a4365; */
.text-indigo-100 /* color: #ebf4ff; */
.text-indigo-200 /* color: #c3dafe; */
.text-indigo-300 /* color: #a3bffa; */
.text-indigo-400 /* color: #7f9cf5; */
.text-indigo-500 /* color: #667eea; */
.text-indigo-600 /* color: #5a67d8; */
.text-indigo-700 /* color: #4c51bf; */
.text-indigo-800 /* color: #434190; */
.text-indigo-900 /* color: #3c366b; */
.text-purple-100 /* color: #faf5ff; */
.text-purple-200 /* color: #e9d8fd; */
.text-purple-300 /* color: #d6bcfa; */
.text-purple-400 /* color: #b794f4; */
.text-purple-500 /* color: #9f7aea; */
.text-purple-600 /* color: #805ad5; */
.text-purple-700 /* color: #6b46c1; */
.text-purple-800 /* color: #553c9a; */
.text-purple-900 /* color: #44337a; */
.text-pink-100 /* color: #fff5f7; */
.text-pink-200 /* color: #fed7e2; */
.text-pink-300 /* color: #fbb6ce; */
.text-pink-400 /* color: #f687b3; */
.text-pink-500 /* color: #ed64a6; */
.text-pink-600 /* color: #d53f8c; */
.text-pink-700 /* color: #b83280; */
.text-pink-800 /* color: #97266d; */
.text-pink-900 /* color: #702459; */
/*
* Text Decoration
* --------------------
* Utilities for controlling the decoration of text.
* By default, only responsive, hover and focus variants are generated for text decoration utilities.
*/
.underline /* text-decoration: underline; */
.line-through /* text-decoration: line-through; */
.no-underline /* text-decoration: none; */
/*
* Text Transform
* --------------------
* Utilities for controlling the transformation of text.
* By default, only responsive variants are generated for text transformation utilities.
*/
.uppercase /* text-transform: uppercase; */
.lowercase /* text-transform: lowercase; */
.capitalize /* text-transform: capitalize; */
.normal-case /* text-transform: none; */
/*
* Vertical Align
* --------------------
* Utilities for controlling the vertical alignment of an inline or table-cell box.
* By default, only responsive variants are generated for vertical alignment utilities.
*/
.align-baseline /* vertical-align: baseline; */
.align-top /* vertical-align: top; */
.align-middle /* vertical-align: middle; */
.align-bottom /* vertical-align: bottom; */
.align-text-top /* vertical-align: text-top; */
.align-text-bottom /* vertical-align: text-bottom; */
/*
* Whitespace
* --------------------
* Utilities for controlling an element's white-space property.
* By default, only responsive variants are generated for whitespace utilities.
*/
.whitespace-normal /* white-space: normal; */
.whitespace-no-wrap /* white-space: nowrap; */
.whitespace-pre /* white-space: pre; */
.whitespace-pre-line /* white-space: pre-line; */
.whitespace-pre-wrap /* white-space: pre-wrap; */
/*
* Word Break
* --------------------
* Utilities for controlling word breaks in an element.
* By default, only responsive variants are generated for word break utilities.
*/
.break-normal /* word-break: normal; overflow-wrap: normal */
.break-words /* overflow-wrap: break-word; */
.break-all /* word-break: break-all; */
.truncate /* overflow: hidden; text-overflow: ellipsis; white-space: nowrap */
/* *******************************************************************************************
* BACKGROUNDS
* ******************************************************************************************* */
/*
* BACKGROUND ATTACHMENT
* --------------------
* Utilities for controlling how a background image behaves when scrolling.
* By default, only responsive variants are generated for background attachment utilities.
*/
.bg-fixed /* background-attachment: fixed; */
.bg-local /* background-attachment: local; */
.bg-scroll /* background-attachment: scroll; */
/*
* BACKGROUND COLOR
* --------------------
* Utilities for controlling how a background image behaves when scrolling.
* By default, only responsive, hover and focus variants are generated for background color utilities.
*/
.bg-transparent /* background-color: transparent; */
.bg-black /* background-color: #000; */
.bg-white /* background-color: #fff; */
.bg-gray-100 /* background-color: #f7fafc; */
.bg-gray-200 /* background-color: #edf2f7; */
.bg-gray-300 /* background-color: #e2e8f0; */
.bg-gray-400 /* background-color: #cbd5e0; */
.bg-gray-500 /* background-color: #a0aec0; */
.bg-gray-600 /* background-color: #718096; */
.bg-gray-700 /* background-color: #4a5568; */
.bg-gray-800 /* background-color: #2d3748; */
.bg-gray-900 /* background-color: #1a202c; */
.bg-red-100 /* background-color: #fff5f5; */
.bg-red-200 /* background-color: #fed7d7; */
.bg-red-300 /* background-color: #feb2b2; */
.bg-red-400 /* background-color: #fc8181; */
.bg-red-500 /* background-color: #f56565; */
.bg-red-600 /* background-color: #e53e3e; */
.bg-red-700 /* background-color: #c53030; */
.bg-red-800 /* background-color: #9b2c2c; */
.bg-red-900 /* background-color: #742a2a; */
.bg-orange-100 /* background-color: #fffaf0; */
.bg-orange-200 /* background-color: #feebc8; */
.bg-orange-300 /* background-color: #fbd38d; */
.bg-orange-400 /* background-color: #f6ad55; */
.bg-orange-500 /* background-color: #ed8936; */
.bg-orange-600 /* background-color: #dd6b20; */
.bg-orange-700 /* background-color: #c05621; */
.bg-orange-800 /* background-color: #9c4221; */
.bg-orange-900 /* background-color: #7b341e; */
.bg-yellow-100 /* background-color: #fffff0; */
.bg-yellow-200 /* background-color: #fefcbf; */
.bg-yellow-300 /* background-color: #faf089; */
.bg-yellow-400 /* background-color: #f6e05e; */
.bg-yellow-500 /* background-color: #ecc94b; */
.bg-yellow-600 /* background-color: #d69e2e; */
.bg-yellow-700 /* background-color: #b7791f; */
.bg-yellow-800 /* background-color: #975a16; */
.bg-yellow-900 /* background-color: #744210; */
.bg-green-100 /* background-color: #f0fff4; */
.bg-green-200 /* background-color: #c6f6d5; */
.bg-green-300 /* background-color: #9ae6b4; */
.bg-green-400 /* background-color: #68d391; */
.bg-green-500 /* background-color: #48bb78; */
.bg-green-600 /* background-color: #38a169; */
.bg-green-700 /* background-color: #2f855a; */
.bg-green-800 /* background-color: #276749; */
.bg-green-900 /* background-color: #22543d; */
.bg-teal-100 /* background-color: #e6fffa; */
.bg-teal-200 /* background-color: #b2f5ea; */
.bg-teal-300 /* background-color: #81e6d9; */
.bg-teal-400 /* background-color: #4fd1c5; */
.bg-teal-500 /* background-color: #38b2ac; */
.bg-teal-600 /* background-color: #319795; */
.bg-teal-700 /* background-color: #2c7a7b; */
.bg-teal-800 /* background-color: #285e61; */
.bg-teal-900 /* background-color: #234e52; */
.bg-blue-100 /* background-color: #ebf8ff; */
.bg-blue-200 /* background-color: #bee3f8; */
.bg-blue-300 /* background-color: #90cdf4; */
.bg-blue-400 /* background-color: #63b3ed; */
.bg-blue-500 /* background-color: #4299e1; */
.bg-blue-600 /* background-color: #3182ce; */
.bg-blue-700 /* background-color: #2b6cb0; */
.bg-blue-800 /* background-color: #2c5282; */
.bg-blue-900 /* background-color: #2a4365; */
.bg-indigo-100 /* background-color: #ebf4ff; */
.bg-indigo-200 /* background-color: #c3dafe; */
.bg-indigo-300 /* background-color: #a3bffa; */
.bg-indigo-400 /* background-color: #7f9cf5; */
.bg-indigo-500 /* background-color: #667eea; */
.bg-indigo-600 /* background-color: #5a67d8; */
.bg-indigo-700 /* background-color: #4c51bf; */
.bg-indigo-800 /* background-color: #434190; */
.bg-indigo-900 /* background-color: #3c366b; */
.bg-purple-100 /* background-color: #faf5ff; */
.bg-purple-200 /* background-color: #e9d8fd; */
.bg-purple-300 /* background-color: #d6bcfa; */
.bg-purple-400 /* background-color: #b794f4; */
.bg-purple-500 /* background-color: #9f7aea; */
.bg-purple-600 /* background-color: #805ad5; */
.bg-purple-700 /* background-color: #6b46c1; */
.bg-purple-800 /* background-color: #553c9a; */
.bg-purple-900 /* background-color: #44337a; */
.bg-pink-100 /* background-color: #fff5f7; */
.bg-pink-200 /* background-color: #fed7e2; */
.bg-pink-300 /* background-color: #fbb6ce; */
.bg-pink-400 /* background-color: #f687b3; */
.bg-pink-500 /* background-color: #ed64a6; */
.bg-pink-600 /* background-color: #d53f8c; */
.bg-pink-700 /* background-color: #b83280; */
.bg-pink-800 /* background-color: #97266d; */
.bg-pink-900 /* background-color: #702459; */
/*
* BACKGROUND POSITION
* --------------------
* Utilities for controlling how a background image behaves when scrolling.
* By default, only responsive variants are generated for background position utilities.
*/
.bg-bottom /* background-position: bottom; */
.bg-center /* background-position: center; */
.bg-left /* background-position: left; */
.bg-left-bottom /* background-position: left bottom; */
.bg-left-top /* background-position: left top; */
.bg-right /* background-position: right; */
.bg-right-bottom /* background-position: right bottom; */
.bg-right-top /* background-position: right top; */
.bg-top /* background-position: top; */
/*
* BACKGROUND REPEAT
* --------------------
* Utilities for controlling the repetition of an element's background image.
* By default, only responsive variants are generated for background repeat utilities.
*/
.bg-repeat /* background-repeat: repeat; */
.bg-no-repeat /* background-repeat: no-repeat; */
.bg-repeat-x /* background-repeat: repeat-x; */
.bg-repeat-y /* background-repeat: repeat-y; */
.bg-repeat-round /* background-repeat: round; */
.bg-repeat-space /* background-repeat: space; */
/*
* BACKGROUND SIZE
* --------------------
* Utilities for controlling the background size of an element's background image.
* By default, only responsive variants are generated for background size utilities.
*/
.bg-auto /* background-size: auto; */
.bg-cover /* background-size: cover; */
.bg-contain /* background-size: contain; */
/* *******************************************************************************************
* BORDERS
* ******************************************************************************************* */
/*
* BORDER COLOR
* --------------------
* Utilities for controlling the color of an element's borders.
* By default, only responsive, hover and focus variants are generated for border color utilities.
*/
.border-transparent /* border-color: transparent; */
.border-black /* border-color: #000; */
.border-white /* border-color: #fff; */
.border-gray-100 /* border-color: #f7fafc; */
.border-gray-200 /* border-color: #edf2f7; */
.border-gray-300 /* border-color: #e2e8f0; */
.border-gray-400 /* border-color: #cbd5e0; */
.border-gray-500 /* border-color: #a0aec0; */
.border-gray-600 /* border-color: #718096; */
.border-gray-700 /* border-color: #4a5568; */
.border-gray-800 /* border-color: #2d3748; */
.border-gray-900 /* border-color: #1a202c; */
.border-red-100 /* border-color: #fff5f5; */
.border-red-200 /* border-color: #fed7d7; */
.border-red-300 /* border-color: #feb2b2; */
.border-red-400 /* border-color: #fc8181; */
.border-red-500 /* border-color: #f56565; */
.border-red-600 /* border-color: #e53e3e; */
.border-red-700 /* border-color: #c53030; */
.border-red-800 /* border-color: #9b2c2c; */
.border-red-900 /* border-color: #742a2a; */
.border-orange-100 /* border-color: #fffaf0; */
.border-orange-200 /* border-color: #feebc8; */
.border-orange-300 /* border-color: #fbd38d; */
.border-orange-400 /* border-color: #f6ad55; */
.border-orange-500 /* border-color: #ed8936; */
.border-orange-600 /* border-color: #dd6b20; */
.border-orange-700 /* border-color: #c05621; */
.border-orange-800 /* border-color: #9c4221; */
.border-orange-900 /* border-color: #7b341e; */
.border-yellow-100 /* border-color: #fffff0; */
.border-yellow-200 /* border-color: #fefcbf; */
.border-yellow-300 /* border-color: #faf089; */
.border-yellow-400 /* border-color: #f6e05e; */
.border-yellow-500 /* border-color: #ecc94b; */
.border-yellow-600 /* border-color: #d69e2e; */
.border-yellow-700 /* border-color: #b7791f; */
.border-yellow-800 /* border-color: #975a16; */
.border-yellow-900 /* border-color: #744210; */
.border-green-100 /* border-color: #f0fff4; */
.border-green-200 /* border-color: #c6f6d5; */
.border-green-300 /* border-color: #9ae6b4; */
.border-green-400 /* border-color: #68d391; */
.border-green-500 /* border-color: #48bb78; */
.border-green-600 /* border-color: #38a169; */
.border-green-700 /* border-color: #2f855a; */
.border-green-800 /* border-color: #276749; */
.border-green-900 /* border-color: #22543d; */
.border-teal-100 /* border-color: #e6fffa; */
.border-teal-200 /* border-color: #b2f5ea; */
.border-teal-300 /* border-color: #81e6d9; */
.border-teal-400 /* border-color: #4fd1c5; */
.border-teal-500 /* border-color: #38b2ac; */
.border-teal-600 /* border-color: #319795; */
.border-teal-700 /* border-color: #2c7a7b; */
.border-teal-800 /* border-color: #285e61; */
.border-teal-900 /* border-color: #234e52; */
.border-blue-100 /* border-color: #ebf8ff; */
.border-blue-200 /* border-color: #bee3f8; */
.border-blue-300 /* border-color: #90cdf4; */
.border-blue-400 /* border-color: #63b3ed; */
.border-blue-500 /* border-color: #4299e1; */
.border-blue-600 /* border-color: #3182ce; */
.border-blue-700 /* border-color: #2b6cb0; */
.border-blue-800 /* border-color: #2c5282; */
.border-blue-900 /* border-color: #2a4365; */
.border-indigo-100 /* border-color: #ebf4ff; */
.border-indigo-200 /* border-color: #c3dafe; */
.border-indigo-300 /* border-color: #a3bffa; */
.border-indigo-400 /* border-color: #7f9cf5; */
.border-indigo-500 /* border-color: #667eea; */
.border-indigo-600 /* border-color: #5a67d8; */
.border-indigo-700 /* border-color: #4c51bf; */
.border-indigo-800 /* border-color: #434190; */
.border-indigo-900 /* border-color: #3c366b; */
.border-purple-100 /* border-color: #faf5ff; */
.border-purple-200 /* border-color: #e9d8fd; */
.border-purple-300 /* border-color: #d6bcfa; */
.border-purple-400 /* border-color: #b794f4; */
.border-purple-500 /* border-color: #9f7aea; */
.border-purple-600 /* border-color: #805ad5; */
.border-purple-700 /* border-color: #6b46c1; */
.border-purple-800 /* border-color: #553c9a; */
.border-purple-900 /* border-color: #44337a; */
.border-pink-100 /* border-color: #fff5f7; */
.border-pink-200 /* border-color: #fed7e2; */
.border-pink-300 /* border-color: #fbb6ce; */
.border-pink-400 /* border-color: #f687b3; */
.border-pink-500 /* border-color: #ed64a6; */
.border-pink-600 /* border-color: #d53f8c; */
.border-pink-700 /* border-color: #b83280; */
.border-pink-800 /* border-color: #97266d; */
.border-pink-900 /* border-color: #702459; */
/*
* BORDER STYLE
* --------------------
* Utilities for controlling the style of an element's borders.
* By default, only responsive variants are generated for border style utilities.
*/
.border-solid /* border-style: solid; */
.border-dashed /* border-style: dashed; */
.border-dotted /* border-style: dotted; */
.border-double /* border-style: double; */
.border-none /* border-style: none; */
/*
* BORDER WIDTH
* --------------------
* Utilities for controlling the width of an element's borders.
* By default, only responsive variants are generated for border width utilities.
*/
.border /* border-width: 1px; */
.border-0 /* border-width: 0; */
.border-2 /* border-width: 2px; */
.border-4 /* border-width: 4px; */
.border-8 /* border-width: 8px; */
.border-t /* border-top-width: 1px; */
.border-r /* border-right-width: 1px; */
.border-b /* border-bottom-width: 1px; */
.border-l /* border-left-width: 1px; */
.border-t-0 /* border-top-width: 0; */
.border-r-0 /* border-right-width: 0; */
.border-b-0 /* border-bottom-width: 0; */
.border-l-0 /* border-left-width: 0; */
.border-t-2 /* border-top-width: 2px; */
.border-r-2 /* border-right-width: 2px; */
.border-b-2 /* border-bottom-width: 2px; */
.border-l-2 /* border-left-width: 2px; */
.border-t-4 /* border-top-width: 4px; */
.border-r-4 /* border-right-width: 4px; */
.border-b-4 /* border-bottom-width: 4px; */
.border-l-4 /* border-left-width: 4px; */
.border-t-8 /* border-top-width: 8px; */
.border-r-8 /* border-right-width: 8px; */
.border-b-8 /* border-bottom-width: 8px; */
.border-l-8 /* border-left-width: 8px; */
/*
* BORDER RADIUS
* --------------------
* Utilities for controlling the border radius of an element.
* By default, only responsive variants are generated for border radius utilities.
*/
.rounded-none /* border-radius: 0; */
.rounded-sm /* border-radius: 0.125rem; */
.rounded /* border-radius: 0.25rem; */
.rounded-md /* border-radius: 0.375rem; */
.rounded-lg /* border-radius: 0.5rem; */
.rounded-full /* border-radius: 9999px; */
.rounded-t-none /* border-top-left-radius: 0; border-top-right-radius: 0; */
.rounded-r-none /* border-top-right-radius: 0; border-bottom-right-radius: 0; */
.rounded-b-none /* border-bottom-right-radius: 0; border-bottom-left-radius: 0; */
.rounded-l-none /* border-top-left-radius: 0; border-bottom-left-radius: 0; */
.rounded-t-sm /* border-top-left-radius: 0.125rem; border-top-right-radius: 0.125rem; */
.rounded-r-sm /* border-top-right-radius: 0.125rem; border-bottom-right-radius: 0.125rem; */
.rounded-b-sm /* border-bottom-right-radius: 0.125rem; border-bottom-left-radius: 0.125rem; */
.rounded-l-sm /* border-top-left-radius: 0.125rem; border-bottom-left-radius: 0.125rem; */
.rounded-t /* border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; */
.rounded-r /* border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; */
.rounded-b /* border-bottom-right-radius: 0.25rem; border-bottom-left-radius: 0.25rem; */
.rounded-l /* border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem; */
.rounded-t-md /* border-top-left-radius: 0.375rem; border-top-right-radius: 0.375rem; */
.rounded-r-md /* border-top-right-radius: 0.375rem; border-bottom-right-radius: 0.375rem; */
.rounded-b-md /* border-bottom-right-radius: 0.375rem; border-bottom-left-radius: 0.375rem; */
.rounded-l-md /* border-top-left-radius: 0.375rem; border-bottom-left-radius: 0.375rem; */
.rounded-t-lg /* border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; */
.rounded-r-lg /* border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem; */
.rounded-b-lg /* border-bottom-right-radius: 0.5rem; border-bottom-left-radius: 0.5rem; */
.rounded-l-lg /* border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem; */
.rounded-t-full /* border-top-left-radius: 9999px; border-top-right-radius: 9999px; */
.rounded-r-full /* border-top-right-radius: 9999px; border-bottom-right-radius: 9999px; */
.rounded-b-full /* border-bottom-right-radius: 9999px; border-bottom-left-radius: 9999px; */
.rounded-l-full /* border-top-left-radius: 9999px; border-bottom-left-radius: 9999px; */
.rounded-tl-none /* border-top-left-radius: 0; */
.rounded-tr-none /* border-top-right-radius: 0; */
.rounded-br-none /* border-bottom-right-radius: 0; */
.rounded-bl-none /* border-bottom-left-radius: 0; */
.rounded-tl-sm /* border-top-left-radius: 0.125rem; */
.rounded-tr-sm /* border-top-right-radius: 0.125rem; */
.rounded-br-sm /* border-bottom-right-radius: 0.125rem; */
.rounded-bl-sm /* border-bottom-left-radius: 0.125rem; */
.rounded-tl /* border-top-left-radius: 0.25rem; */
.rounded-tr /* border-top-right-radius: 0.25rem; */
.rounded-br /* border-bottom-right-radius: 0.25rem; */
.rounded-bl /* border-bottom-left-radius: 0.25rem; */
.rounded-tl-md /* border-top-left-radius: 0.375rem; */
.rounded-tr-md /* border-top-right-radius: 0.375rem; */
.rounded-br-md /* border-bottom-right-radius: 0.375rem; */
.rounded-bl-md /* border-bottom-left-radius: 0.375rem; */
.rounded-tl-lg /* border-top-left-radius: 0.5rem; */
.rounded-tr-lg /* border-top-right-radius: 0.5rem; */
.rounded-br-lg /* border-bottom-right-radius: 0.5rem; */
.rounded-bl-lg /* border-bottom-left-radius: 0.5rem; */
.rounded-tl-full /* border-top-left-radius: 9999px; */
.rounded-tr-full /* border-top-right-radius: 9999px; */
.rounded-br-full /* border-bottom-right-radius: 9999px; */
.rounded-bl-full /* border-bottom-left-radius: 9999px; */
/* *******************************************************************************************
* TABLES
* ******************************************************************************************* */
/*
* TABLE LAYOUT
* --------------------
* Utilities for controlling the table layout algorithm.
* By default, only responsive variants are generated for table layout utilities.
*/
.table-auto /* table-layout: auto; */
.table-fixed /* table-layout: fixed; */
/*
* BORDER COLLAPSE
* --------------------
* Utilities for controlling whether table borders should collapse or be separated.
* By default, only responsive variants are generated for border collapse utilities.
*/
.border-collapse /* border-collapse: collapse; */
.border-separate /* border-collapse: separate; */
/* *******************************************************************************************
* EFFECTS
* ******************************************************************************************* */
/*
* BOX SHADOW
* --------------------
* Utilities for controlling the box shadow of an element.
* By default, only responsive, hover and focus variants are generated for box shadow utilities.
*/
.shadow-xs /* box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05); */
.shadow-sm /* box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); */
.shadow /* box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); */
.shadow-md /* box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); */
.shadow-lg /* box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); */
.shadow-xl /* box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); */
.shadow-2xl /* box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); */
.shadow-inner /* box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06); */
.shadow-outline /* box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5); */
.shadow-none /* box-shadow: none; */
/*
* OPACITY
* --------------------
* Utilities for controlling the opacity of an element.
* By default, only responsive, hover and focus variants are generated for opacity utilities.
*/
.opacity-100 /* opacity: 1; */
.opacity-75 /* opacity: .75; */
.opacity-50 /* opacity: .5; */
.opacity-25 /* opacity: .25; */
.opacity-0 /* opacity: 0; */
/* *******************************************************************************************
* TRANSITIONS
* ******************************************************************************************* */
/*
* TRANSITION PROPERTY
* --------------------
* Utilities for controlling which CSS properties transition.
* By default, only responsive variants are generated for transition-property utilities.
*/
.transition-none /* transition-property: none; */
.transition-all /* transition-property: all; */
.transition /* transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform; */
.transition-colors /* transition-property: background-color, border-color, color, fill, stroke; */
.transition-opacity /* transition-property: opacity; */
.transition-shadow /* transition-property: box-shadow; */
.transition-transform /* transition-property: transform; */
/*
* TRANSITION DURATION
* --------------------
* Utilities for controlling the duration of CSS transitions.
* By default, only responsive variants are generated for transition-duration utilities.
*/
.duration-75 /* transition-duration: 75ms; */
.duration-100 /* transition-duration: 100ms; */
.duration-150 /* transition-duration: 150ms; */
.duration-200 /* transition-duration: 200ms; */
.duration-300 /* transition-duration: 300ms; */
.duration-500 /* transition-duration: 500ms; */
.duration-700 /* transition-duration: 700ms; */
.duration-1000 /* transition-duration: 1000ms; */
/*
* TRANSITION TIMING FUNCTION
* --------------------
* Utilities for controlling the easing of CSS transitions.
* By default, only responsive variants are generated for transition-timing-function utilities.
*/
.ease-linear /* transition-timing-function: linear; */
.ease-in /* transition-timing-function: cubic-bezier(0.4, 0, 1, 1); */
.ease-out /* transition-timing-function: cubic-bezier(0, 0, 0.2, 1); */
.ease-in-out /* transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); */
/* *******************************************************************************************
* TRANSFORMS
* ******************************************************************************************* */
/*
* SCALE
* --------------------
* Utilities for scaling elements with transform.
* By default, only responsive, hover and focus variants are generated for scale utilities.
*/
.scale-0 /* --transform-scale-x: 0; --transform-scale-y: 0; */
.scale-50 /* --transform-scale-x: .5; --transform-scale-y: .5; */
.scale-75 /* --transform-scale-x: .75; --transform-scale-y: .75; */
.scale-90 /* --transform-scale-x: .9; --transform-scale-y: .9; */
.scale-95 /* --transform-scale-x: .95; --transform-scale-y: .95; */
.scale-100 /* --transform-scale-x: 1; --transform-scale-y: 1; */
.scale-105 /* --transform-scale-x: 1.05; --transform-scale-y: 1.05; */
.scale-110 /* --transform-scale-x: 1.1; --transform-scale-y: 1.1; */
.scale-125 /* --transform-scale-x: 1.25; --transform-scale-y: 1.25; */
.scale-150 /* --transform-scale-x: 1.5; --transform-scale-y: 1.5; */
.scale-x-0 /* --transform-scale-x: 0; */
.scale-x-50 /* --transform-scale-x: .5; */
.scale-x-75 /* --transform-scale-x: .75; */
.scale-x-90 /* --transform-scale-x: .9; */
.scale-x-95 /* --transform-scale-x: .95; */
.scale-x-100 /* --transform-scale-x: 1; */
.scale-x-105 /* --transform-scale-x: 1.05; */
.scale-x-110 /* --transform-scale-x: 1.1; */
.scale-x-125 /* --transform-scale-x: 1.25; */
.scale-x-150 /* --transform-scale-x: 1.5; */
.scale-y-0 /* --transform-scale-y: 0; */
.scale-y-50 /* --transform-scale-y: .5; */
.scale-y-75 /* --transform-scale-y: .75; */
.scale-y-90 /* --transform-scale-y: .9; */
.scale-y-95 /* --transform-scale-y: .95; */
.scale-y-100 /* --transform-scale-y: 1; */
.scale-y-105 /* --transform-scale-y: 1.05; */
.scale-y-110 /* --transform-scale-y: 1.1; */
.scale-y-125 /* --transform-scale-y: 1.25; */
.scale-y-150 /* --transform-scale-y: 1.5; */
/*
* ROTATE
* --------------------
* Utilities for rotating elements with transform.
* By default, only responsive, hover and focus variants are generated for rotate utilities.
*/
.rotate-0 /* --transform-rotate: 0; */
.rotate-45 /* --transform-rotate: 45deg; */
.rotate-90 /* --transform-rotate: 90deg; */
.rotate-180 /* --transform-rotate: 180deg; */
.-rotate-180 /* --transform-rotate: -180deg; */
.-rotate-90 /* --transform-rotate: -90deg; */
.-rotate-45 /* --transform-rotate: -45deg; */
/*
* TRANSLATE
* --------------------
* Utilities for translating elements with transform.
* By default, only responsive, hover and focus variants are generated for translate utilities.
*/
.translate-x-0 /* --transform-translate-x: 0; */
.translate-x-1 /* --transform-translate-x: 0.25rem; */
.translate-x-2 /* --transform-translate-x: 0.5rem; */
.translate-x-3 /* --transform-translate-x: 0.75rem; */
.translate-x-4 /* --transform-translate-x: 1rem; */
.translate-x-5 /* --transform-translate-x: 1.25rem; */
.translate-x-6 /* --transform-translate-x: 1.5rem; */
.translate-x-8 /* --transform-translate-x: 2rem; */
.translate-x-10 /* --transform-translate-x: 2.5rem; */
.translate-x-12 /* --transform-translate-x: 3rem; */
.translate-x-16 /* --transform-translate-x: 4rem; */
.translate-x-20 /* --transform-translate-x: 5rem; */
.translate-x-24 /* --transform-translate-x: 6rem; */
.translate-x-32 /* --transform-translate-x: 8rem; */
.translate-x-40 /* --transform-translate-x: 10rem; */
.translate-x-48 /* --transform-translate-x: 12rem; */
.translate-x-56 /* --transform-translate-x: 14rem; */
.translate-x-64 /* --transform-translate-x: 16rem; */
.translate-x-px /* --transform-translate-x: 1px; */
.-translate-x-1 /* --transform-translate-x: -0.25rem; */
.-translate-x-2 /* --transform-translate-x: -0.5rem; */
.-translate-x-3 /* --transform-translate-x: -0.75rem; */
.-translate-x-4 /* --transform-translate-x: -1rem; */
.-translate-x-5 /* --transform-translate-x: -1.25rem; */
.-translate-x-6 /* --transform-translate-x: -1.5rem; */
.-translate-x-8 /* --transform-translate-x: -2rem; */
.-translate-x-10 /* --transform-translate-x: -2.5rem; */
.-translate-x-12 /* --transform-translate-x: -3rem; */
.-translate-x-16 /* --transform-translate-x: -4rem; */
.-translate-x-20 /* --transform-translate-x: -5rem; */
.-translate-x-24 /* --transform-translate-x: -6rem; */
.-translate-x-32 /* --transform-translate-x: -8rem; */
.-translate-x-40 /* --transform-translate-x: -10rem; */
.-translate-x-48 /* --transform-translate-x: -12rem; */
.-translate-x-56 /* --transform-translate-x: -14rem; */
.-translate-x-64 /* --transform-translate-x: -16rem; */
.-translate-x-px /* --transform-translate-x: -1px; */
.-translate-x-full /* --transform-translate-x: -100%; */
.-translate-x-1/2 /* --transform-translate-x: -50%; */
.translate-x-1/2 /* --transform-translate-x: 50%; */
.translate-x-full /* --transform-translate-x: 100%; */
.translate-y-0 /* --transform-translate-y: 0; */
.translate-y-1 /* --transform-translate-y: 0.25rem; */
.translate-y-2 /* --transform-translate-y: 0.5rem; */
.translate-y-3 /* --transform-translate-y: 0.75rem; */
.translate-y-4 /* --transform-translate-y: 1rem; */
.translate-y-5 /* --transform-translate-y: 1.25rem; */
.translate-y-6 /* --transform-translate-y: 1.5rem; */
.translate-y-8 /* --transform-translate-y: 2rem; */
.translate-y-10 /* --transform-translate-y: 2.5rem; */
.translate-y-12 /* --transform-translate-y: 3rem; */
.translate-y-16 /* --transform-translate-y: 4rem; */
.translate-y-20 /* --transform-translate-y: 5rem; */
.translate-y-24 /* --transform-translate-y: 6rem; */
.translate-y-32 /* --transform-translate-y: 8rem; */
.translate-y-40 /* --transform-translate-y: 10rem; */
.translate-y-48 /* --transform-translate-y: 12rem; */
.translate-y-56 /* --transform-translate-y: 14rem; */
.translate-y-64 /* --transform-translate-y: 16rem; */
.translate-y-px /* --transform-translate-y: 1px; */
.-translate-y-1 /* --transform-translate-y: -0.25rem; */
.-translate-y-2 /* --transform-translate-y: -0.5rem; */
.-translate-y-3 /* --transform-translate-y: -0.75rem; */
.-translate-y-4 /* --transform-translate-y: -1rem; */
.-translate-y-5 /* --transform-translate-y: -1.25rem; */
.-translate-y-6 /* --transform-translate-y: -1.5rem; */
.-translate-y-8 /* --transform-translate-y: -2rem; */
.-translate-y-10 /* --transform-translate-y: -2.5rem; */
.-translate-y-12 /* --transform-translate-y: -3rem; */
.-translate-y-16 /* --transform-translate-y: -4rem; */
.-translate-y-20 /* --transform-translate-y: -5rem; */
.-translate-y-24 /* --transform-translate-y: -6rem; */
.-translate-y-32 /* --transform-translate-y: -8rem; */
.-translate-y-40 /* --transform-translate-y: -10rem; */
.-translate-y-48 /* --transform-translate-y: -12rem; */
.-translate-y-56 /* --transform-translate-y: -14rem; */
.-translate-y-64 /* --transform-translate-y: -16rem; */
.-translate-y-px /* --transform-translate-y: -1px; */
.-translate-y-full /* --transform-translate-y: -100%; */
.-translate-y-1/2 /* --transform-translate-y: -50%; */
.translate-y-1/2 /* --transform-translate-y: 50%; */
.translate-y-full /* --transform-translate-y: 100%; */
/*
* SKEW
* --------------------
* Utilities for translating elements with transform.
* By default, only responsive, hover and focus variants are generated for skew utilities.
*/
.skew-x-0 /* --transform-skew-x: 0; */
.skew-x-3 /* --transform-skew-x: 3deg; */
.skew-x-6 /* --transform-skew-x: 6deg; */
.skew-x-12 /* --transform-skew-x: 12deg; */
.-skew-x-12 /* --transform-skew-x: -12deg; */
.-skew-x-6 /* --transform-skew-x: -6deg; */
.-skew-x-3 /* --transform-skew-x: -3deg; */
.skew-y-0 /* --transform-skew-y: 0; */
.skew-y-3 /* --transform-skew-y: 3deg; */
.skew-y-6 /* --transform-skew-y: 6deg; */
.skew-y-12 /* --transform-skew-y: 12deg; */
.-skew-y-12 /* --transform-skew-y: -12deg; */
.-skew-y-6 /* --transform-skew-y: -6deg; */
.-skew-y-3 /* --transform-skew-y: -3deg; */
/*
* TRANSFORM ORIGIN
* --------------------
* Utilities for specifying the origin for an element's transformations.
* By default, only responsive variants are generated for transform-origin utilities.
*/
.origin-center /* transform-origin: center; */
.origin-top /* transform-origin: top; */
.origin-top-right /* transform-origin: top right; */
.origin-right /* transform-origin: right; */
.origin-bottom-right /* transform-origin: bottom right; */
.origin-bottom /* transform-origin: bottom; */
.origin-bottom-left /* transform-origin: bottom left; */
.origin-left /* transform-origin: left; */
.origin-top-left /* transform-origin: top left; */
/* *******************************************************************************************
* INTERACTIVITY
* ******************************************************************************************* */
/*
* APPEARANCE
* --------------------
* Utilities for suppressing native form control styling.
* By default, only responsive variants are generated for appearance utilities.
*/
.appearance-none /* appearance: none; */
/*
* CURSOR
* --------------------
* Utilities for controlling the cursor style when hovering over an element.
* By default, only responsive variants are generated for cursor utilities.
*/
.cursor-auto /* cursor: auto; */
.cursor-default /* cursor: default; */
.cursor-pointer /* cursor: pointer; */
.cursor-wait /* cursor: wait; */
.cursor-text /* cursor: text; */
.cursor-move /* cursor: move; */
.cursor-not-allowed /* cursor: not-allowed; */
/*
* OUTLINE
* --------------------
* Utilities for controlling an element's outline.
* By default, only focus variants are generated for outline utilities.
*/
.outline-none /* outline: 0; */
/*
* POINTER EVENTS
* --------------------
* Utilities for controlling whether an element responds to pointer events.
* By default, only responsive variants are generated for pointer event utilities.
*/
.pointer-events-none /* pointer-events: none; */
.pointer-events-auto /* pointer-events: auto; */
/*
* RESIZE
* --------------------
* Utilities for controlling how an element can be resized.
* By default, only responsive variants are generated for resizing utilities.
*/
.resize-none /* resize: none; */
.resize /* resize: both; */
.resize-y /* resize: vertical; */
.resize-x /* resize: horizontal; */
/*
* USER SELECT
* --------------------
* Utilities for controlling whether the user can select text in an element.
* By default, only responsive variants are generated for user-select utilities.
*/
.select-none /* user-select: none; */
.select-text /* user-select: text; */
.select-all /* user-select: all; */
.select-auto /* user-select: auto; */
/* *******************************************************************************************
* SVG
* ******************************************************************************************* */
/*
* FILL
* --------------------
* Utilities for styling the fill of SVG elements.
* By default, only responsive variants are generated for fill utilities.
*/
.fill-current /* fill: currentColor; */
/*
* STROKE
* --------------------
* Utilities for styling the stroke of SVG elements.
* By default, only responsive variants are generated for stroke utilities.
*/
.stroke-current /* stroke: currentColor; */
/*
* STROKE WIDTH
* --------------------
* Utilities for styling the stroke width of SVG elements.
* By default, only responsive variants are generated for stroke-width utilities.
*/
.stroke-0 /* stroke-width: 0; */
.stroke-1 /* stroke-width: 1; */
.stroke-2 /* stroke-width: 2; */
/* *******************************************************************************************
* ACCESSIBILITY
* ******************************************************************************************* */
/*
* SCREEN READERS
* --------------------
* Utilities for improving accessibility with screen readers.
* By default, only responsive, hover, focus and active variants are generated for accessibility utilities.
*/
.sr-only /* position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; */
.not-sr-only /* position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip: auto; white-space: normal; */
================================================
FILE: frontend/vue.js
================================================
/* *******************************************************************************************
* GLOBAL CONFIG
* Vue.config is an object containing Vue’s global configurations.
* You can modify its properties listed below before bootstrapping your application.
* https://vuejs.org/v2/api/#Global-Config
* ******************************************************************************************* */
// Configure whether to allow vue-devtools inspection
Vue.config.devtools = true
// Enable component init, compile, render and patch performance tracing in the browser devtool timeline.
Vue.config.performance = true
// Prevent the production tip on Vue startup.
Vue.config.productionTip = false
// Suppress all Vue logs and warnings
Vue.config.silent = false
// Make Vue ignore custom elements defined outside of Vue
Vue.config.ignoredElements = [
'my-custom-web-component',
'another-web-component',
/^ion-/
]
// Define custom key alias(es) for v-on.
Vue.config.keyCodes = {
v: 86,
f1: 112,
// camelCase won`t work
mediaPlayPause: 179,
// instead you can use kebab-case with double quotation marks
"media-play-pause": 179,
up: [38, 87]
}
// Assign a handler for uncaught errors during component render function and watchers.
Vue.config.errorHandler = function (err, vm, info) {
// handle error
// `info` is a Vue-specific error info, e.g. which lifecycle hook
// the error was found in. Only available in 2.2.0+
}
// Define custom merging strategies for options
Vue.config.optionMergeStrategies._my_option = function (parent, child, vm) {
return child + 1
}
// Assign a custom handler for runtime Vue warnings.
// Note this only works during development and is ignored in production.
Vue.config.warnHandler = function (msg, vm, trace) {
// `trace` is the component hierarchy trace
}
/* *******************************************************************************************
* GLOBAL API
* https://vuejs.org/v2/api/#Global-API
* ******************************************************************************************* */
Vue.version // Provides the installed version of Vue as a string.
Vue.extend(options) // Create a “subclass” of the base Vue constructor.
Vue.mixin( mixin ) // Apply a mixin globally, which affects every Vue instance created afterwards.
Vue.nextTick([callback, context]) // Defer the callback to be executed after the next DOM update cycle.
Vue.use(plugin) // Install a Vue.js plugin. If the plugin is an Object, it must expose an install method.
Vue.set(target, key, value) // Set a property on an object. If the object is reactive, ensure the property is created as a reactive property and trigger view updates.
Vue.delete(target, key) // Delete a property on an object. If the object is reactive, ensure the deletion triggers view updates.
// Register or retrieve a global directive.
Vue.directive('my-directive', {
bind: function () {},
inserted: function () {},
update: function () {},
componentUpdated: function () {},
unbind: function () {}
})
// Register (function directive)
Vue.directive('my-directive', function () {
// This will be called as `bind` and `update`
})
// Getter, return the directive definition if registered
var myDirective = Vue.directive('my-directive')
// Register a global filter
Vue.filter('my-filter', function (value) { })
// Getter, return the filter if registered
var myFilter = Vue.filter('my-filter')
// Register an extended constructor
Vue.component('my-component', Vue.extend({ }))
// Register an options object (automatically call Vue.extend)
Vue.component('my-component', { })
// Retrieve a registered component (always return constructor)
var MyComponent = Vue.component('my-component')
Vue.compile(template) // Compiles a template string into a render function
/* *******************************************************************************************
* OPTIONS > DATA
* https://vuejs.org/v2/api/#Options-Data
* ******************************************************************************************* */
new Vue({
// A list/hash of attributes that are exposed to accept data from the parent component.
// It has an Array-based simple syntax and an alternative Object-based syntax that allows
// advanced configurations such as type checking, custom validation and default values.
props: {
height: Number,
age: {
type: Number,
default: 0,
required: true,
validator: function (value) {
return value >= 0
}
}
},
// Primarily intended to make unit testing easier
propsData: {
age: 12
},
// The data object for the Vue instance.
// Vue will recursively convert its properties into getter/setters to make it “reactive”.
// Note: you should not use an arrow function with the data property
data () {
return {
a: 1,
b: 2
}
},
// Computed properties to be mixed into the Vue instance.
// All getters and setters have their this context automatically bound to the Vue instance.
// Computed properties are cached, and only re-computed on reactive dependency changes.
// Note that if a certain dependency is out of the instance’s scope (i.e. not reactive),
// the computed property will not be updated.
computed: {
// Note: you should not use an arrow function to define a computed property.
aDouble: function () {
return this.a * 2
},
aPlus: {
get: function () {
return this.a + 1
},
set: function (v) {
this.a = v - 1
}
}
},
// An object where keys are expressions to watch and values are the corresponding callbacks.
// The value can also be a string of a method name, or an Object that contains additional options.
// The Vue instance will call $watch() for each entry in the object at instantiation.
watch: {
// Note: you should not use an arrow function to define a watcher.
a: function (val, oldVal) {
console.log('new: %s, old: %s', val, oldVal)
},
// String method name
b: 'someMethod',
// Deep watcher
c: {
handler: function (val, oldVal) { /* ... */ },
deep: true
},
// The callback will be called immediately after the start of the observation
d: {
handler: function (val, oldVal) { /* ... */ },
immediate: true
}
},
// Methods to be mixed into the Vue instance. You can access these methods directly on the VM instance,
// or use them in directive expressions. All methods will have their this context automatically bound to
// the Vue instance.
methods: {
// Note: you should not use an arrow function to define a method.
plus () {
this.a++
}
}
})
/* *******************************************************************************************
* OPTIONS > DOM
* https://vuejs.org/v2/api/#Options-DOM
* ******************************************************************************************* */
new Vue({
// Provide the Vue instance an existing DOM element to mount on.
// It can be a CSS selector string or an actual HTMLElement.
// After the instance is mounted, the resolved element will be accessible as vm.$el.
el: '#example',
// A string template to be used as the markup for the Vue instance.
// The template will replace the mounted element.
// Any existing markup inside the mounted element will be ignored,
// unless content distribution slots are present in the template.
// If the string starts with # it will be used as a querySelector and
// use the selected element’s innerHTML as the template string. This
// allows the use of the common