Skip to content

Y
ycc-website
Commit 19dce072 authored by chenqikuai's avatar chenqikuai
1 Browse files
Options

fix: 修复一些border-radius和shadow和margin和padding

parent f102c826
Hide whitespace changes
Inline Side-by-side
Showing with 949 additions and 847 deletions
src/components/pc/BlockChainBrowser/ChainOverview/ChainTxNumberChart.vue
View file @ 19dce072
......@@ -34,5 +34,6 @@ export default Vue.extend({
<style scoped>
.container {
height: 280px;
border-radius: 4px;
}
</style>
src/components/pc/BlockChainBrowser/LatestBlock/index.vue
View file @ 19dce072
......@@ -49,7 +49,7 @@
}"
>
<span class="text-app-color-2">
{{ item.minerHash | filterHash }}
{{ item.minerHash | filterHash(9) }}
</span>
</router-link>
</div>
......
src/components/pc/BlockChainBrowser/TradeTable/index.vue
View file @ 19dce072
......@@ -131,7 +131,7 @@
</el-table-column>
<el-table-column width="40"></el-table-column>
</el-table>
<div class="flex justify-end pt-7 mb-16">
<div class="flex justify-end pt-7" v-if="!hidePageContainer">
<page-container
@pageChange="pageChange"
@sizeChange="sizeChange"
......@@ -160,6 +160,10 @@ export default Vue.extend({
TxStatus,
},
props: {
hidePageContainer: {
type: Boolean,
default: false,
},
Trades: Array,
Loading: Boolean,
groupCellName: Function,
......
src/views/pc/address/index.vue
View file @ 19dce072
<template>
<div
style="margin-top: 70px;"
style="margin-top: 70px; padding-bottom: 60px;"
class="min-w-1200 md:w-bodySet mx-auto flow-root"
>
<chain-search :value="value" :setValue="setValue"></chain-search>
<chain-search
:value="value"
:setValue="setValue"
style="margin-top: 30px;"
></chain-search>
<address-overview class="mt-7"></address-overview>
<TabList
:setFocusedTab="(v) => (focusedTab = v)"
:tabList="tabList"
:focusedTab="focusedTab"
></TabList>
<DataFilter
v-if="focusedTab === 'txRecord'"
:optionList="optionList"
:setValue="(v) => (selectedOption = v)"
:value="selectedOption"
<div
style="margin-top: 30px; border-radius: 4px;"
class="shadow-shadow1 overflow-hidden"
>
<template #left>
{{ $t('lang.trade.txTotal', [pages.total]) }}
</template>
</DataFilter>
<TradeTable
v-if="focusedTab === 'txRecord'"
:groupCellName="groupCellName"
:Loading="loadingTxRecordTable"
:Trades="txRecordList"
:pages="pages"
:sizeChange="sizeChange"
:pageChange="pageChange"
></TradeTable>
<vote-pack-table
v-if="focusedTab === 'votingRecord'"
:list="voteList"
:loading="loadingVote"
></vote-pack-table>
<vote-pack-table
v-if="focusedTab === 'packingRecord'"
:list="packList"
:loading="loadingPack"
></vote-pack-table>
<TabList
:setFocusedTab="(v) => (focusedTab = v)"
:tabList="tabList"
:focusedTab="focusedTab"
></TabList>
<DataFilter
v-if="focusedTab === 'txRecord'"
:optionList="optionList"
:setValue="(v) => (selectedOption = v)"
:value="selectedOption"
>
<template #left>
{{ $t('lang.trade.txTotal', [pages.total]) }}
</template>
</DataFilter>
<TradeTable
v-if="focusedTab === 'txRecord'"
:hidePageContainer="true"
:groupCellName="groupCellName"
:Loading="loadingTxRecordTable"
:Trades="txRecordList"
></TradeTable>
<vote-pack-table
v-if="focusedTab === 'votingRecord'"
:list="voteList"
:loading="loadingVote"
></vote-pack-table>
<vote-pack-table
v-if="focusedTab === 'packingRecord'"
:list="packList"
:loading="loadingPack"
></vote-pack-table>
</div>
<div class="flex justify-end" v-if="focusedTab === 'txRecord'">
<page-container
style="margin-top: 30px;"
:pages="pages"
:sizeChange="sizeChange"
:pageChange="pageChange"
></page-container>
</div>
</div>
</template>
......@@ -47,6 +63,7 @@ import ChainSearch from '@/components/pc/BlockChainBrowser/ChainSearch.vue'
import AddressOverview from '@/components/pc/BlockChainBrowser/AddressOverview/index.vue'
import VueTypedMixins from 'vue-typed-mixins'
import address from '@/mixin/address'
import PageContainer from '@/components/pc/BlockChainBrowser/PageContainer.vue'
import TabList from '@/components/pc/BlockChainBrowser/TabList/index.vue'
import TradeTable from '@/components/pc/BlockChainBrowser/TradeTable/index.vue'
import DataFilter from '@/components/pc/BlockChainBrowser/DataFilter/index.vue'
......@@ -59,6 +76,7 @@ export default VueTypedMixins(address).extend({
DataFilter,
TradeTable,
VotePackTable,
PageContainer,
},
computed: {},
})
......
src/views/pc/block.vue
View file @ 19dce072
<template>
<div class="the-block min-w-1200 md:w-bodySet mx-auto mb-16 flow-root">
<div
class="the-block min-w-1200 md:w-bodySet mx-auto flow-root"
style="padding-bottom: 60px;"
>
<chain-search class="mt-7"></chain-search>
<div class="pc-block inner-box">
<div class="title flex items-center justify-between">
......
src/views/pc/blockChainBrowser.vue
View file @ 19dce072
<template>
<div class="mx-auto md:w-bodySet blockChain min-w-1200 relative">
<div class="mx-auto md:w-bodySet blockChain min-w-1200 relative flow-root">
<ChainCard :msgList="msgList" class="chainCard"></ChainCard>
<ChainTitle />
<chain-search
......@@ -10,7 +10,7 @@
/>
<div class="rect-block"></div>
<ChainOverview :totalTx="totalTx" />
<div class="flex justify-between mt-14">
<div class="flex justify-between mt-14" style="margin-bottom: 60px;">
<latest-block :latestBlocks="latestBlocks"></latest-block>
<latest-tx :latestTxs="latestTxs"></latest-tx>
</div>
......
src/views/pc/blockDetail/index.vue
View file @ 19dce072
......@@ -13,47 +13,54 @@
:loading="loadingOverview"
:loadingRelativeBlockHeight="loadingRelativeNumber"
></block-overview>
<TabList
:tabList="tabList"
:setFocusedTab="(v) => (focusedTab = v)"
:focusedTab="focusedTab"
></TabList>
<DataFilter
v-if="focusedTab === 'txRecordTab'"
:optionList="txRecordFilterOptionList"
:setValue="(v) => (txRecordFilterValue = v)"
:value="txRecordFilterValue"
<div
style="
box-shadow: 0px 2px 15px 0px rgba(31, 52, 112, 0.06);
padding-bottom: 60px;
"
>
<template #left>
{{ $t('lang.trade.txTotal', [pages.total]) }}
</template>
</DataFilter>
<TradeTable
v-if="focusedTab === 'txRecordTab'"
:groupCellName="groupCellName"
:Loading="loadingTable"
:Trades="Trades"
:pages="pages"
:sizeChange="sizeChange"
:pageChange="pageChange"
></TradeTable>
<DataFilter
v-if="focusedTab === 'consensusNodeTab'"
:optionList="consensusNodeFilterOptionList"
:setValue="(v) => (consensusNodeFilterValue = v)"
:value="consensusNodeFilterValue"
>
<template #left>
{{
$t('lang.trade.consensusNodeTotal', [consensusNodeTableList.length])
}}
</template>
</DataFilter>
<consensus-node-table
v-if="focusedTab === 'consensusNodeTab'"
:list="consensusNodeTableList"
:loading="loadingConsensusNodeTable"
></consensus-node-table>
<TabList
:tabList="tabList"
:setFocusedTab="(v) => (focusedTab = v)"
:focusedTab="focusedTab"
></TabList>
<DataFilter
v-if="focusedTab === 'txRecordTab'"
:optionList="txRecordFilterOptionList"
:setValue="(v) => (txRecordFilterValue = v)"
:value="txRecordFilterValue"
>
<template #left>
{{ $t('lang.trade.txTotal', [pages.total]) }}
</template>
</DataFilter>
<TradeTable
v-if="focusedTab === 'txRecordTab'"
:groupCellName="groupCellName"
:Loading="loadingTable"
:Trades="Trades"
:pages="pages"
:sizeChange="sizeChange"
:pageChange="pageChange"
></TradeTable>
<DataFilter
v-if="focusedTab === 'consensusNodeTab'"
:optionList="consensusNodeFilterOptionList"
:setValue="(v) => (consensusNodeFilterValue = v)"
:value="consensusNodeFilterValue"
>
<template #left>
{{
$t('lang.trade.consensusNodeTotal', [consensusNodeTableList.length])
}}
</template>
</DataFilter>
<consensus-node-table
v-if="focusedTab === 'consensusNodeTab'"
:list="consensusNodeTableList"
:loading="loadingConsensusNodeTable"
></consensus-node-table>
</div>
</div>
</template>
......
src/views/pc/tradeDetail.vue
View file @ 19dce072
<template>
<div
style="margin-top: 70px;"
style="margin-top: 70px; padding-bottom: 60px;"
class="min-w-1200 md:w-bodySet mx-auto flow-root"
>
<chain-search
style="margin-top: 30px;"
style="margin-top: 30px; margin-bottom: 30px;"
:clickSearch="clickSearch"
:value="searchValue"
:setValue="setSearchValue"
></chain-search>
<div class="data-table table-shadow">
<div class="data-table shadow-shadow1">
<div class="head">
<span>{{ $t('lang.txDetail.detail') }}</span>
</div>
......@@ -149,17 +149,18 @@
</div>
<div class="area line" v-if="data.execer !== 'user.write'">
<label>
<span>{{ $t('lang.txDetail.inData') }}</span>
<span class="text-text-color">{{ $t('lang.txDetail.inData') }}</span>
</label>
<div class="item-text" v-loading="loading">
<pre class="preTxt" contenteditable="true">
<code>{{data.inData | decodeTransferNote}}</code>
</pre>
<pre
class="preTxt"
contenteditable="true"
><code>{{data.inData | decodeTransferNote}}</code></pre>
</div>
</div>
<div class="area line" v-if="data.execer !== 'user.write'">
<label>
<span>{{ $t('lang.txDetail.outData') }}</span>
<span class="text-text-color">{{ $t('lang.txDetail.outData') }}</span>
</label>
<div class="item-text" v-loading="loading">
<pre class="preTxt" contenteditable="true">
......@@ -193,7 +194,7 @@ export default vueTypedMixins(tradeDetail).extend({
color: #1f3470;
font-size: 14px;
background: white;
border-radius: 2px;
border-radius: 4px;
border: 1px solid rgba(235, 239, 241, 1);
.head {
height: 70px;
......
tailwind.config.js
View file @ 19dce072
const colors = require('tailwindcss/colors')
const plugin = require('tailwindcss/plugin')
const colors = require("tailwindcss/colors");
const plugin = require("tailwindcss/plugin");
module.exports = {
purge: [
'./src/**/*.html',
'./src/**/*.vue',
'./src/**/*.jsx',
],
purge: ["./src/**/*.html", "./src/**/*.vue", "./src/**/*.jsx"],
presets: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {
backgroundImage: theme => ({
'bgfooter': "url(/img/bgfooter.png)",
})
backgroundImage: (theme) => ({
bgfooter: "url(/img/bgfooter.png)",
}),
},
screens: {
sm: '640px',
md: '768px',
lg: '1024px',
xl: '1280px',
'2xl': '1536px',
sm: "640px",
md: "768px",
lg: "1024px",
xl: "1280px",
"2xl": "1536px",
},
colors: {
transparent: 'transparent',
current: 'currentColor',
'app-color-2': '#3F79FE',
'app-color-3': '#434C57',
'app-color-4': '#697889',
'app-color-footer': '#151C29',
'title-color': '#22356C',
'article-color': '#2E3B4D',
'text-color': '#7C88AD',
'footer-color': '#2545CB',
'footer-color-light': 'rgba(37, 69, 203, 0.3)',
'feature-text': '#495E75',
'scene-color': '#435897',
transparent: "transparent",
current: "currentColor",
"app-color-2": "#3F79FE",
"app-color-3": "#434C57",
"app-color-4": "#697889",
"app-color-footer": "#151C29",
"title-color": "#22356C",
"article-color": "#2E3B4D",
"text-color": "#7C88AD",
"footer-color": "#2545CB",
"footer-color-light": "rgba(37, 69, 203, 0.3)",
"feature-text": "#495E75",
"scene-color": "#435897",
"my-red": "#f06666",
'details-bg': '#F2F2F2',
'bgfootercolor': '#f9fafb',
"lightBlue": "#4FDDFC",
lightBlue2: 'rgba(79, 221, 252, 0.04)',
"details-bg": "#F2F2F2",
bgfootercolor: "#f9fafb",
lightBlue: "#4FDDFC",
lightBlue2: "rgba(79, 221, 252, 0.04)",
lightBlue3: "rgba(37, 69, 203, 0.1)",
'active': '#0276F7',
"darkBlue": "#1F3470",
'orange': '#F8A457',
orange2: '#FFA457',
lightOrange: 'rgba(248, 164, 87, 0.1)',
active: "#0276F7",
darkBlue: "#1F3470",
orange: "#F8A457",
orange2: "#FFA457",
lightOrange: "rgba(248, 164, 87, 0.1)",
black: colors.black,
white: colors.white,
gray: colors.coolGray,
......@@ -58,877 +54,949 @@ module.exports = {
pink: colors.pink,
},
spacing: {
px: '1px',
0: '0px',
'contactMove': '320px',
'bodySet': '1200px',
0.5: '0.125rem',
1: '0.25rem',
1.5: '0.375rem',
2: '0.5rem',
2.5: '0.625rem',
3: '0.75rem',
3.5: '0.875rem',
4: '1rem',
5: '1.25rem',
6: '1.5rem',
7: '1.75rem',
8: '2rem',
9: '2.25rem',
10: '2.5rem',
11: '2.75rem',
12: '3rem',
14: '3.5rem',
16: '4rem',
20: '5rem',
24: '6rem',
28: '7rem',
32: '8rem',
36: '9rem',
40: '10rem',
44: '11rem',
48: '12rem',
52: '13rem',
56: '14rem',
60: '15rem',
64: '16rem',
72: '18rem',
80: '20rem',
96: '24rem'
px: "1px",
0: "0px",
contactMove: "320px",
bodySet: "1200px",
0.5: "0.125rem",
1: "0.25rem",
1.5: "0.375rem",
2: "0.5rem",
2.5: "0.625rem",
3: "0.75rem",
3.5: "0.875rem",
4: "1rem",
5: "1.25rem",
6: "1.5rem",
7: "1.75rem",
8: "2rem",
9: "2.25rem",
10: "2.5rem",
11: "2.75rem",
12: "3rem",
14: "3.5rem",
16: "4rem",
20: "5rem",
24: "6rem",
28: "7rem",
32: "8rem",
36: "9rem",
40: "10rem",
44: "11rem",
48: "12rem",
52: "13rem",
56: "14rem",
60: "15rem",
64: "16rem",
72: "18rem",
80: "20rem",
96: "24rem",
},
animation: {
none: 'none',
spin: 'spin 1s linear infinite',
ping: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite',
pulse: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
bounce: 'bounce 1s infinite',
none: "none",
spin: "spin 1s linear infinite",
ping: "ping 1s cubic-bezier(0, 0, 0.2, 1) infinite",
pulse: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
bounce: "bounce 1s infinite",
},
backgroundColor: (theme) => theme('colors'),
backgroundColor: (theme) => theme("colors"),
backgroundImage: {
none: 'none',
'gradient-to-t': 'linear-gradient(to top, var(--tw-gradient-stops))',
'gradient-to-tr': 'linear-gradient(to top right, var(--tw-gradient-stops))',
'gradient-to-r': 'linear-gradient(to right, var(--tw-gradient-stops))',
'gradient-to-r-s': 'linear-gradient(to right, #fff 0, transparent 35px, transparent 1150px, #fff)',
'gradient-to-br': 'linear-gradient(to bottom right, var(--tw-gradient-stops))',
'gradient-to-b': 'linear-gradient(to bottom, var(--tw-gradient-stops))',
'gradient-to-bl': 'linear-gradient(to bottom left, var(--tw-gradient-stops))',
'gradient-to-l': 'linear-gradient(to left, var(--tw-gradient-stops))',
'gradient-to-tl': 'linear-gradient(to top left, var(--tw-gradient-stops))',
},
backgroundOpacity: (theme) => theme('opacity'),
none: "none",
"gradient-to-t": "linear-gradient(to top, var(--tw-gradient-stops))",
"gradient-to-tr":
"linear-gradient(to top right, var(--tw-gradient-stops))",
"gradient-to-r": "linear-gradient(to right, var(--tw-gradient-stops))",
"gradient-to-r-s":
"linear-gradient(to right, #fff 0, transparent 35px, transparent 1150px, #fff)",
"gradient-to-br":
"linear-gradient(to bottom right, var(--tw-gradient-stops))",
"gradient-to-b": "linear-gradient(to bottom, var(--tw-gradient-stops))",
"gradient-to-bl":
"linear-gradient(to bottom left, var(--tw-gradient-stops))",
"gradient-to-l": "linear-gradient(to left, var(--tw-gradient-stops))",
"gradient-to-tl":
"linear-gradient(to top left, var(--tw-gradient-stops))",
},
backgroundOpacity: (theme) => theme("opacity"),
backgroundPosition: {
bottom: 'bottom',
center: 'center',
left: 'left',
'left-bottom': 'left bottom',
'left-top': 'left top',
right: 'right',
'right-bottom': 'right bottom',
'right-top': 'right top',
top: 'top',
bottom: "bottom",
center: "center",
left: "left",
"left-bottom": "left bottom",
"left-top": "left top",
right: "right",
"right-bottom": "right bottom",
"right-top": "right top",
top: "top",
},
backgroundSize: {
auto: 'auto',
cover: 'cover',
contain: 'contain',
half: '50%',
'70%': '70%',
'125px': '125px'
auto: "auto",
cover: "cover",
contain: "contain",
half: "50%",
"70%": "70%",
"125px": "125px",
},
borderColor: (theme) => ({
...theme('colors'),
DEFAULT: theme('colors.gray.200', 'currentColor'),
...theme("colors"),
DEFAULT: theme("colors.gray.200", "currentColor"),
}),
borderOpacity: (theme) => theme('opacity'),
borderOpacity: (theme) => theme("opacity"),
borderRadius: {
none: '0px',
sm: '0.125rem',
DEFAULT: '0.25rem',
md: '0.375rem',
lg: '0.5rem',
xl: '0.75rem',
'2xl': '1rem',
'3xl': '1.5rem',
full: '9999px',
none: "0px",
sm: "0.125rem",
DEFAULT: "0.25rem",
md: "0.375rem",
lg: "0.5rem",
xl: "0.75rem",
"2xl": "1rem",
"3xl": "1.5rem",
full: "9999px",
},
borderWidth: {
DEFAULT: '1px',
0: '0px',
2: '2px',
4: '4px',
8: '8px',
DEFAULT: "1px",
0: "0px",
2: "2px",
4: "4px",
8: "8px",
},
boxShadow: {
sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
DEFAULT: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
'2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
none: 'none',
details: '0px 2px 15px 0px #E1ECFF',
lists: '0px 0px 20px 0px rgba(37, 69, 203, 0.1)',
shadow1: '0px 2px 15px 0px rgba(31,52,112,0.06)'
sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
DEFAULT:
"0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
md:
"0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
lg:
"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
xl:
"0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
"2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)",
none: "none",
details: "0px 2px 15px 0px #E1ECFF",
lists: "0px 0px 20px 0px rgba(37, 69, 203, 0.1)",
shadow1: "0px 2px 15px 0px rgba(31, 52, 112, 0.06)",
},
container: {},
cursor: {
auto: 'auto',
default: 'default',
pointer: 'pointer',
wait: 'wait',
text: 'text',
move: 'move',
help: 'help',
'not-allowed': 'not-allowed',
},
divideColor: (theme) => theme('borderColor'),
divideOpacity: (theme) => theme('borderOpacity'),
divideWidth: (theme) => theme('borderWidth'),
fill: { current: 'currentColor' },
auto: "auto",
default: "default",
pointer: "pointer",
wait: "wait",
text: "text",
move: "move",
help: "help",
"not-allowed": "not-allowed",
},
divideColor: (theme) => theme("borderColor"),
divideOpacity: (theme) => theme("borderOpacity"),
divideWidth: (theme) => theme("borderWidth"),
fill: { current: "currentColor" },
flex: {
1: '1 1 0%',
auto: '1 1 auto',
initial: '0 1 auto',
none: 'none',
'50%': '0 0 50%',
1: "1 1 0%",
auto: "1 1 auto",
initial: "0 1 auto",
none: "none",
"50%": "0 0 50%",
},
flexGrow: {
0: '0',
DEFAULT: '1',
0: "0",
DEFAULT: "1",
},
flexShrink: {
0: '0',
DEFAULT: '1',
0: "0",
DEFAULT: "1",
},
fontFamily: {
sans: [
'ui-sans-serif',
'system-ui',
'-apple-system',
'BlinkMacSystemFont',
"ui-sans-serif",
"system-ui",
"-apple-system",
"BlinkMacSystemFont",
'"Segoe UI"',
'Roboto',
"Roboto",
'"Helvetica Neue"',
'Arial',
"Arial",
'"Noto Sans"',
'sans-serif',
"sans-serif",
'"Apple Color Emoji"',
'"Segoe UI Emoji"',
'"Segoe UI Symbol"',
'"Noto Color Emoji"',
],
din: ['Din', 'ui-serif', 'Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'],
serif: ['ui-serif', 'Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'],
din: [
"Din",
"ui-serif",
"Georgia",
"Cambria",
'"Times New Roman"',
"Times",
"serif",
],
serif: [
"ui-serif",
"Georgia",
"Cambria",
'"Times New Roman"',
"Times",
"serif",
],
mono: [
'ui-monospace',
'SFMono-Regular',
'Menlo',
'Monaco',
'Consolas',
"ui-monospace",
"SFMono-Regular",
"Menlo",
"Monaco",
"Consolas",
'"Liberation Mono"',
'"Courier New"',
'monospace',
"monospace",
],
},
fontSize: {
xs: ['0.75rem', { lineHeight: '1rem' }],
sm: ['0.875rem', { lineHeight: '1.25rem' }],
base: ['1rem', { lineHeight: '1.5rem' }],
lg: ['1.125rem', { lineHeight: '1.75rem' }],
xl: ['1.25rem', { lineHeight: '1.75rem' }],
'2xl': ['1.5rem', { lineHeight: '2rem' }],
'3xl': ['1.875rem', { lineHeight: '2.25rem' }],
'4xl': ['2.25rem', { lineHeight: '2.5rem' }],
'5xl': ['3rem', { lineHeight: '1' }],
'6xl': ['3.75rem', { lineHeight: '1' }],
'7xl': ['4.5rem', { lineHeight: '1' }],
'8xl': ['6rem', { lineHeight: '1' }],
'9xl': ['8rem', { lineHeight: '1' }],
'28px': ['28px', { lineHeight: '1.5' }],
'18px': ['18px', { lineHeight: '1.5' }],
'16px': ['16px', { lineHeight: '1.5' }],
'14px': ['14px', { lineHeight: '1.5' }],
'40px': ['40px', { lineHeight: '1.5' }],
'32px': ['32px', { lineHeight: '1.5' }],
'24px': ['24px', { lineHeight: '1.5' }],
'20px': ['20px', { lineHeight: '1.5' }],
'10px': ['10px', { lineHeight: '1.5' }]
xs: ["0.75rem", { lineHeight: "1rem" }],
sm: ["0.875rem", { lineHeight: "1.25rem" }],
base: ["1rem", { lineHeight: "1.5rem" }],
lg: ["1.125rem", { lineHeight: "1.75rem" }],
xl: ["1.25rem", { lineHeight: "1.75rem" }],
"2xl": ["1.5rem", { lineHeight: "2rem" }],
"3xl": ["1.875rem", { lineHeight: "2.25rem" }],
"4xl": ["2.25rem", { lineHeight: "2.5rem" }],
"5xl": ["3rem", { lineHeight: "1" }],
"6xl": ["3.75rem", { lineHeight: "1" }],
"7xl": ["4.5rem", { lineHeight: "1" }],
"8xl": ["6rem", { lineHeight: "1" }],
"9xl": ["8rem", { lineHeight: "1" }],
"28px": ["28px", { lineHeight: "1.5" }],
"18px": ["18px", { lineHeight: "1.5" }],
"16px": ["16px", { lineHeight: "1.5" }],
"14px": ["14px", { lineHeight: "1.5" }],
"40px": ["40px", { lineHeight: "1.5" }],
"32px": ["32px", { lineHeight: "1.5" }],
"24px": ["24px", { lineHeight: "1.5" }],
"20px": ["20px", { lineHeight: "1.5" }],
"10px": ["10px", { lineHeight: "1.5" }],
},
fontWeight: {
thin: '100',
extralight: '200',
light: '300',
normal: '400',
medium: '500',
semibold: '600',
bold: '700',
extrabold: '800',
black: '900',
},
gap: (theme) => theme('spacing'),
gradientColorStops: (theme) => theme('colors'),
thin: "100",
extralight: "200",
light: "300",
normal: "400",
medium: "500",
semibold: "600",
bold: "700",
extrabold: "800",
black: "900",
},
gap: (theme) => theme("spacing"),
gradientColorStops: (theme) => theme("colors"),
gridAutoColumns: {
auto: 'auto',
min: 'min-content',
max: 'max-content',
fr: 'minmax(0, 1fr)',
auto: "auto",
min: "min-content",
max: "max-content",
fr: "minmax(0, 1fr)",
},
gridAutoRows: {
auto: 'auto',
min: 'min-content',
max: 'max-content',
fr: 'minmax(0, 1fr)',
auto: "auto",
min: "min-content",
max: "max-content",
fr: "minmax(0, 1fr)",
},
gridColumn: {
auto: 'auto',
'span-1': 'span 1 / span 1',
'span-2': 'span 2 / span 2',
'span-3': 'span 3 / span 3',
'span-4': 'span 4 / span 4',
'span-5': 'span 5 / span 5',
'span-6': 'span 6 / span 6',
'span-7': 'span 7 / span 7',
'span-8': 'span 8 / span 8',
'span-9': 'span 9 / span 9',
'span-10': 'span 10 / span 10',
'span-11': 'span 11 / span 11',
'span-12': 'span 12 / span 12',
'span-full': '1 / -1',
auto: "auto",
"span-1": "span 1 / span 1",
"span-2": "span 2 / span 2",
"span-3": "span 3 / span 3",
"span-4": "span 4 / span 4",
"span-5": "span 5 / span 5",
"span-6": "span 6 / span 6",
"span-7": "span 7 / span 7",
"span-8": "span 8 / span 8",
"span-9": "span 9 / span 9",
"span-10": "span 10 / span 10",
"span-11": "span 11 / span 11",
"span-12": "span 12 / span 12",
"span-full": "1 / -1",
},
gridColumnEnd: {
auto: 'auto',
1: '1',
2: '2',
3: '3',
4: '4',
5: '5',
6: '6',
7: '7',
8: '8',
9: '9',
10: '10',
11: '11',
12: '12',
13: '13',
auto: "auto",
1: "1",
2: "2",
3: "3",
4: "4",
5: "5",
6: "6",
7: "7",
8: "8",
9: "9",
10: "10",
11: "11",
12: "12",
13: "13",
},
gridColumnStart: {
auto: 'auto',
1: '1',
2: '2',
3: '3',
4: '4',
5: '5',
6: '6',
7: '7',
8: '8',
9: '9',
10: '10',
11: '11',
12: '12',
13: '13',
auto: "auto",
1: "1",
2: "2",
3: "3",
4: "4",
5: "5",
6: "6",
7: "7",
8: "8",
9: "9",
10: "10",
11: "11",
12: "12",
13: "13",
},
gridRow: {
auto: 'auto',
'span-1': 'span 1 / span 1',
'span-2': 'span 2 / span 2',
'span-3': 'span 3 / span 3',
'span-4': 'span 4 / span 4',
'span-5': 'span 5 / span 5',
'span-6': 'span 6 / span 6',
'span-full': '1 / -1',
auto: "auto",
"span-1": "span 1 / span 1",
"span-2": "span 2 / span 2",
"span-3": "span 3 / span 3",
"span-4": "span 4 / span 4",
"span-5": "span 5 / span 5",
"span-6": "span 6 / span 6",
"span-full": "1 / -1",
},
gridRowStart: {
auto: 'auto',
1: '1',
2: '2',
3: '3',
4: '4',
5: '5',
6: '6',
7: '7',
auto: "auto",
1: "1",
2: "2",
3: "3",
4: "4",
5: "5",
6: "6",
7: "7",
},
gridRowEnd: {
auto: 'auto',
1: '1',
2: '2',
3: '3',
4: '4',
5: '5',
6: '6',
7: '7',
auto: "auto",
1: "1",
2: "2",
3: "3",
4: "4",
5: "5",
6: "6",
7: "7",
},
gridTemplateColumns: {
none: 'none',
1: 'repeat(1, minmax(0, 1fr))',
2: 'repeat(2, minmax(0, 1fr))',
3: 'repeat(3, minmax(0, 1fr))',
4: 'repeat(4, minmax(0, 1fr))',
5: 'repeat(5, minmax(0, 1fr))',
6: 'repeat(6, minmax(0, 1fr))',
7: 'repeat(7, minmax(0, 1fr))',
8: 'repeat(8, minmax(0, 1fr))',
9: 'repeat(9, minmax(0, 1fr))',
10: 'repeat(10, minmax(0, 1fr))',
11: 'repeat(11, minmax(0, 1fr))',
12: 'repeat(12, minmax(0, 1fr))',
none: "none",
1: "repeat(1, minmax(0, 1fr))",
2: "repeat(2, minmax(0, 1fr))",
3: "repeat(3, minmax(0, 1fr))",
4: "repeat(4, minmax(0, 1fr))",
5: "repeat(5, minmax(0, 1fr))",
6: "repeat(6, minmax(0, 1fr))",
7: "repeat(7, minmax(0, 1fr))",
8: "repeat(8, minmax(0, 1fr))",
9: "repeat(9, minmax(0, 1fr))",
10: "repeat(10, minmax(0, 1fr))",
11: "repeat(11, minmax(0, 1fr))",
12: "repeat(12, minmax(0, 1fr))",
},
gridTemplateRows: {
none: 'none',
1: 'repeat(1, minmax(0, 1fr))',
2: 'repeat(2, minmax(0, 1fr))',
3: 'repeat(3, minmax(0, 1fr))',
4: 'repeat(4, minmax(0, 1fr))',
5: 'repeat(5, minmax(0, 1fr))',
6: 'repeat(6, minmax(0, 1fr))',
none: "none",
1: "repeat(1, minmax(0, 1fr))",
2: "repeat(2, minmax(0, 1fr))",
3: "repeat(3, minmax(0, 1fr))",
4: "repeat(4, minmax(0, 1fr))",
5: "repeat(5, minmax(0, 1fr))",
6: "repeat(6, minmax(0, 1fr))",
},
height: (theme) => ({
auto: 'auto',
...theme('spacing'),
'1/2': '50%',
'1/3': '33.333333%',
'2/3': '66.666667%',
'1/4': '25%',
'2/4': '50%',
'3/4': '75%',
'1/5': '20%',
'2/5': '40%',
'3/5': '60%',
'4/5': '80%',
'1/6': '16.666667%',
'2/6': '33.333333%',
'3/6': '50%',
'4/6': '66.666667%',
'5/6': '83.333333%',
'50': '12.6rem',
full: '100%',
screen: '100vh',
auto: "auto",
...theme("spacing"),
"1/2": "50%",
"1/3": "33.333333%",
"2/3": "66.666667%",
"1/4": "25%",
"2/4": "50%",
"3/4": "75%",
"1/5": "20%",
"2/5": "40%",
"3/5": "60%",
"4/5": "80%",
"1/6": "16.666667%",
"2/6": "33.333333%",
"3/6": "50%",
"4/6": "66.666667%",
"5/6": "83.333333%",
"50": "12.6rem",
full: "100%",
screen: "100vh",
}),
inset: (theme, { negative }) => ({
auto: 'auto',
...theme('spacing'),
...negative(theme('spacing')),
'1/2': '50%',
'1/3': '33.333333%',
'2/3': '66.666667%',
'1/4': '25%',
'2/4': '50%',
'3/4': '75%',
full: '100%',
'-1/2': '-50%',
'-1/3': '-33.333333%',
'-2/3': '-66.666667%',
'-1/4': '-25%',
'-2/4': '-50%',
'-3/4': '-75%',
'-full': '-100%',
auto: "auto",
...theme("spacing"),
...negative(theme("spacing")),
"1/2": "50%",
"1/3": "33.333333%",
"2/3": "66.666667%",
"1/4": "25%",
"2/4": "50%",
"3/4": "75%",
full: "100%",
"-1/2": "-50%",
"-1/3": "-33.333333%",
"-2/3": "-66.666667%",
"-1/4": "-25%",
"-2/4": "-50%",
"-3/4": "-75%",
"-full": "-100%",
}),
keyframes: {
spin: {
to: {
transform: 'rotate(360deg)',
transform: "rotate(360deg)",
},
},
ping: {
'75%, 100%': {
transform: 'scale(2)',
opacity: '0',
"75%, 100%": {
transform: "scale(2)",
opacity: "0",
},
},
pulse: {
'50%': {
opacity: '.5',
"50%": {
opacity: ".5",
},
},
bounce: {
'0%, 100%': {
transform: 'translateY(-25%)',
animationTimingFunction: 'cubic-bezier(0.8,0,1,1)',
"0%, 100%": {
transform: "translateY(-25%)",
animationTimingFunction: "cubic-bezier(0.8,0,1,1)",
},
'50%': {
transform: 'none',
animationTimingFunction: 'cubic-bezier(0,0,0.2,1)',
"50%": {
transform: "none",
animationTimingFunction: "cubic-bezier(0,0,0.2,1)",
},
},
},
letterSpacing: {
tighter: '-0.05em',
tight: '-0.025em',
normal: '0em',
wide: '0.025em',
wider: '0.05em',
widest: '0.1em',
tighter: "-0.05em",
tight: "-0.025em",
normal: "0em",
wide: "0.025em",
wider: "0.05em",
widest: "0.1em",
},
lineHeight: {
none: '1',
tight: '1.25',
snug: '1.375',
normal: '1.5',
relaxed: '1.625',
loose: '2',
3: '.75rem',
4: '1rem',
5: '1.25rem',
6: '1.5rem',
7: '1.75rem',
8: '2rem',
9: '2.25rem',
10: '2.5rem',
none: "1",
tight: "1.25",
snug: "1.375",
normal: "1.5",
relaxed: "1.625",
loose: "2",
3: ".75rem",
4: "1rem",
5: "1.25rem",
6: "1.5rem",
7: "1.75rem",
8: "2rem",
9: "2.25rem",
10: "2.5rem",
},
listStyleType: {
none: 'none',
disc: 'disc',
decimal: 'decimal',
none: "none",
disc: "disc",
decimal: "decimal",
},
margin: (theme, { negative }) => ({
auto: 'auto',
...theme('spacing'),
...negative(theme('spacing')),
auto: "auto",
...theme("spacing"),
...negative(theme("spacing")),
}),
maxHeight: (theme) => ({
...theme('spacing'),
full: '100%',
screen: '100vh',
'325': '325px',
...theme("spacing"),
full: "100%",
screen: "100vh",
"325": "325px",
}),
maxWidth: (theme, { breakpoints }) => ({
none: 'none',
0: '0rem',
xs: '20rem',
sm: '24rem',
md: '28rem',
lg: '32rem',
xl: '36rem',
'2xl': '42rem',
'3xl': '48rem',
'4xl': '56rem',
'5xl': '64rem',
'6xl': '72rem',
'7xl': '80rem',
full: '100%',
'650px': '650px',
min: 'min-content',
max: 'max-content',
prose: '65ch',
...breakpoints(theme('screens')),
none: "none",
0: "0rem",
xs: "20rem",
sm: "24rem",
md: "28rem",
lg: "32rem",
xl: "36rem",
"2xl": "42rem",
"3xl": "48rem",
"4xl": "56rem",
"5xl": "64rem",
"6xl": "72rem",
"7xl": "80rem",
full: "100%",
"650px": "650px",
min: "min-content",
max: "max-content",
prose: "65ch",
...breakpoints(theme("screens")),
}),
minHeight: {
0: '0px',
full: '100%',
screen: '100vh',
60: '60px',
80: '80px',
160: '160px',
260: '260px',
320: '320px',
650: '650px'
0: "0px",
full: "100%",
screen: "100vh",
60: "60px",
80: "80px",
160: "160px",
260: "260px",
320: "320px",
650: "650px",
},
minWidth: {
0: '0px',
full: '100%',
min: 'min-content',
max: 'max-content',
'450px': '450px',
'320': '320px',
body: '1520px',
'1200': '1200px',
0: "0px",
full: "100%",
min: "min-content",
max: "max-content",
"450px": "450px",
"320": "320px",
body: "1520px",
"1200": "1200px",
},
objectPosition: {
bottom: 'bottom',
center: 'center',
left: 'left',
'left-bottom': 'left bottom',
'left-top': 'left top',
right: 'right',
'right-bottom': 'right bottom',
'right-top': 'right top',
top: 'top',
bottom: "bottom",
center: "center",
left: "left",
"left-bottom": "left bottom",
"left-top": "left top",
right: "right",
"right-bottom": "right bottom",
"right-top": "right top",
top: "top",
},
opacity: {
0: '0',
5: '0.05',
10: '0.1',
20: '0.2',
25: '0.25',
30: '0.3',
40: '0.4',
50: '0.5',
60: '0.6',
70: '0.7',
75: '0.75',
80: '0.8',
90: '0.9',
95: '0.95',
100: '1',
0: "0",
5: "0.05",
10: "0.1",
20: "0.2",
25: "0.25",
30: "0.3",
40: "0.4",
50: "0.5",
60: "0.6",
70: "0.7",
75: "0.75",
80: "0.8",
90: "0.9",
95: "0.95",
100: "1",
},
order: {
first: '-9999',
last: '9999',
none: '0',
1: '1',
2: '2',
3: '3',
4: '4',
5: '5',
6: '6',
7: '7',
8: '8',
9: '9',
10: '10',
11: '11',
12: '12',
first: "-9999",
last: "9999",
none: "0",
1: "1",
2: "2",
3: "3",
4: "4",
5: "5",
6: "6",
7: "7",
8: "8",
9: "9",
10: "10",
11: "11",
12: "12",
},
outline: {
none: ['2px solid transparent', '2px'],
white: ['2px dotted white', '2px'],
black: ['2px dotted black', '2px'],
none: ["2px solid transparent", "2px"],
white: ["2px dotted white", "2px"],
black: ["2px dotted black", "2px"],
},
padding: (theme) => theme('spacing'),
placeholderColor: (theme) => theme('colors'),
placeholderOpacity: (theme) => theme('opacity'),
padding: (theme) => theme("spacing"),
placeholderColor: (theme) => theme("colors"),
placeholderOpacity: (theme) => theme("opacity"),
ringColor: (theme) => ({
DEFAULT: theme('colors.blue.500', '#3b82f6'),
...theme('colors'),
DEFAULT: theme("colors.blue.500", "#3b82f6"),
...theme("colors"),
}),
ringOffsetColor: (theme) => theme('colors'),
ringOffsetColor: (theme) => theme("colors"),
ringOffsetWidth: {
0: '0px',
1: '1px',
2: '2px',
4: '4px',
8: '8px',
0: "0px",
1: "1px",
2: "2px",
4: "4px",
8: "8px",
},
ringOpacity: (theme) => ({
DEFAULT: '0.5',
...theme('opacity'),
DEFAULT: "0.5",
...theme("opacity"),
}),
ringWidth: {
DEFAULT: '3px',
0: '0px',
1: '1px',
2: '2px',
4: '4px',
8: '8px',
DEFAULT: "3px",
0: "0px",
1: "1px",
2: "2px",
4: "4px",
8: "8px",
},
rotate: {
'-180': '-180deg',
'-90': '-90deg',
'-45': '-45deg',
'-12': '-12deg',
'-6': '-6deg',
'-3': '-3deg',
'-2': '-2deg',
'-1': '-1deg',
0: '0deg',
1: '1deg',
2: '2deg',
3: '3deg',
6: '6deg',
12: '12deg',
45: '45deg',
90: '90deg',
180: '180deg',
"-180": "-180deg",
"-90": "-90deg",
"-45": "-45deg",
"-12": "-12deg",
"-6": "-6deg",
"-3": "-3deg",
"-2": "-2deg",
"-1": "-1deg",
0: "0deg",
1: "1deg",
2: "2deg",
3: "3deg",
6: "6deg",
12: "12deg",
45: "45deg",
90: "90deg",
180: "180deg",
},
scale: {
0: '0',
50: '.5',
75: '.75',
90: '.9',
95: '.95',
100: '1',
105: '1.05',
110: '1.1',
125: '1.25',
150: '1.5',
0: "0",
50: ".5",
75: ".75",
90: ".9",
95: ".95",
100: "1",
105: "1.05",
110: "1.1",
125: "1.25",
150: "1.5",
},
skew: {
'-12': '-12deg',
'-6': '-6deg',
'-3': '-3deg',
'-2': '-2deg',
'-1': '-1deg',
0: '0deg',
1: '1deg',
2: '2deg',
3: '3deg',
6: '6deg',
12: '12deg',
"-12": "-12deg",
"-6": "-6deg",
"-3": "-3deg",
"-2": "-2deg",
"-1": "-1deg",
0: "0deg",
1: "1deg",
2: "2deg",
3: "3deg",
6: "6deg",
12: "12deg",
},
space: (theme, { negative }) => ({
...theme('spacing'),
...negative(theme('spacing')),
...theme("spacing"),
...negative(theme("spacing")),
}),
stroke: {
current: 'currentColor',
current: "currentColor",
},
strokeWidth: {
0: '0',
1: '1',
2: '2',
0: "0",
1: "1",
2: "2",
},
textColor: (theme) => theme('colors'),
textOpacity: (theme) => theme('opacity'),
textColor: (theme) => theme("colors"),
textOpacity: (theme) => theme("opacity"),
transformOrigin: {
center: 'center',
top: 'top',
'top-right': 'top right',
right: 'right',
'bottom-right': 'bottom right',
bottom: 'bottom',
'bottom-left': 'bottom left',
left: 'left',
'top-left': 'top left',
center: "center",
top: "top",
"top-right": "top right",
right: "right",
"bottom-right": "bottom right",
bottom: "bottom",
"bottom-left": "bottom left",
left: "left",
"top-left": "top left",
},
transitionDelay: {
75: '75ms',
100: '100ms',
150: '150ms',
200: '200ms',
300: '300ms',
500: '500ms',
700: '700ms',
1000: '1000ms',
75: "75ms",
100: "100ms",
150: "150ms",
200: "200ms",
300: "300ms",
500: "500ms",
700: "700ms",
1000: "1000ms",
},
transitionDuration: {
DEFAULT: '150ms',
75: '75ms',
100: '100ms',
150: '150ms',
200: '200ms',
300: '300ms',
500: '500ms',
700: '700ms',
1000: '1000ms',
DEFAULT: "150ms",
75: "75ms",
100: "100ms",
150: "150ms",
200: "200ms",
300: "300ms",
500: "500ms",
700: "700ms",
1000: "1000ms",
},
transitionProperty: {
none: 'none',
all: 'all',
DEFAULT: 'background-color, border-color, color, fill, stroke, opacity, box-shadow, transform',
colors: 'background-color, border-color, color, fill, stroke',
opacity: 'opacity',
shadow: 'box-shadow',
transform: 'transform',
none: "none",
all: "all",
DEFAULT:
"background-color, border-color, color, fill, stroke, opacity, box-shadow, transform",
colors: "background-color, border-color, color, fill, stroke",
opacity: "opacity",
shadow: "box-shadow",
transform: "transform",
},
transitionTimingFunction: {
DEFAULT: 'cubic-bezier(0.4, 0, 0.2, 1)',
linear: 'linear',
in: 'cubic-bezier(0.4, 0, 1, 1)',
out: 'cubic-bezier(0, 0, 0.2, 1)',
'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
DEFAULT: "cubic-bezier(0.4, 0, 0.2, 1)",
linear: "linear",
in: "cubic-bezier(0.4, 0, 1, 1)",
out: "cubic-bezier(0, 0, 0.2, 1)",
"in-out": "cubic-bezier(0.4, 0, 0.2, 1)",
},
translate: (theme, { negative }) => ({
...theme('spacing'),
...negative(theme('spacing')),
'1/2': '50%',
'1/3': '33.333333%',
'2/3': '66.666667%',
'1/4': '25%',
'2/4': '50%',
'3/4': '75%',
full: '100%',
'-1/2': '-50%',
'-1/3': '-33.333333%',
'-2/3': '-66.666667%',
'-1/4': '-25%',
'-2/4': '-50%',
'-3/4': '-75%',
'-full': '-100%',
...theme("spacing"),
...negative(theme("spacing")),
"1/2": "50%",
"1/3": "33.333333%",
"2/3": "66.666667%",
"1/4": "25%",
"2/4": "50%",
"3/4": "75%",
full: "100%",
"-1/2": "-50%",
"-1/3": "-33.333333%",
"-2/3": "-66.666667%",
"-1/4": "-25%",
"-2/4": "-50%",
"-3/4": "-75%",
"-full": "-100%",
}),
width: (theme) => ({
auto: 'auto',
...theme('spacing'),
'1/2': '50%',
'1/3': '33.333333%',
'2/3': '66.666667%',
'1/4': '25%',
'2/4': '50%',
'3/4': '75%',
'1/5': '20%',
'2/5': '40%',
'3/5': '60%',
'4/5': '80%',
'1/6': '16.666667%',
'2/6': '33.333333%',
'3/6': '50%',
'4/6': '66.666667%',
'5/6': '83.333333%',
'1/12': '8.333333%',
'2/12': '16.666667%',
'3/12': '25%',
'4/12': '33.333333%',
'5/12': '41.666667%',
'5.9/12': '49%',
'6/12': '50%',
'7/12': '58.333333%',
'8/12': '66.666667%',
'9/12': '75%',
'10/12': '83.333333%',
'11/12': '91.666667%',
full: '100%',
screen: '100vw',
min: 'min-content',
max: 'max-content',
auto: "auto",
...theme("spacing"),
"1/2": "50%",
"1/3": "33.333333%",
"2/3": "66.666667%",
"1/4": "25%",
"2/4": "50%",
"3/4": "75%",
"1/5": "20%",
"2/5": "40%",
"3/5": "60%",
"4/5": "80%",
"1/6": "16.666667%",
"2/6": "33.333333%",
"3/6": "50%",
"4/6": "66.666667%",
"5/6": "83.333333%",
"1/12": "8.333333%",
"2/12": "16.666667%",
"3/12": "25%",
"4/12": "33.333333%",
"5/12": "41.666667%",
"5.9/12": "49%",
"6/12": "50%",
"7/12": "58.333333%",
"8/12": "66.666667%",
"9/12": "75%",
"10/12": "83.333333%",
"11/12": "91.666667%",
full: "100%",
screen: "100vw",
min: "min-content",
max: "max-content",
}),
zIndex: {
auto: 'auto',
0: '0',
10: '10',
20: '20',
30: '30',
40: '40',
50: '50',
auto: "auto",
0: "0",
10: "10",
20: "20",
30: "30",
40: "40",
50: "50",
},
},
variantOrder: [
'first',
'last',
'odd',
'even',
'visited',
'checked',
'group-hover',
'group-focus',
'focus-within',
'hover',
'focus',
'focus-visible',
'active',
'disabled',
"first",
"last",
"odd",
"even",
"visited",
"checked",
"group-hover",
"group-focus",
"focus-within",
"hover",
"focus",
"focus-visible",
"active",
"disabled",
],
variants: {
accessibility: ['responsive', 'focus-within', 'focus'],
alignContent: ['responsive'],
alignItems: ['responsive'],
alignSelf: ['responsive'],
animation: ['responsive'],
appearance: ['responsive'],
backgroundAttachment: ['responsive'],
backgroundClip: ['responsive'],
backgroundColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
backgroundImage: ['responsive'],
backgroundOpacity: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
backgroundPosition: ['responsive'],
backgroundRepeat: ['responsive'],
backgroundSize: ['responsive'],
borderCollapse: ['responsive'],
borderColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
borderOpacity: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
borderRadius: ['responsive'],
borderStyle: ['responsive'],
borderWidth: ['responsive'],
boxShadow: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
boxSizing: ['responsive'],
clear: ['responsive'],
container: ['responsive'],
cursor: ['responsive'],
display: ['responsive'],
divideColor: ['responsive', 'dark'],
divideOpacity: ['responsive', 'dark'],
divideStyle: ['responsive'],
divideWidth: ['responsive'],
fill: ['responsive'],
flex: ['responsive'],
flexDirection: ['responsive'],
flexGrow: ['responsive'],
flexShrink: ['responsive'],
flexWrap: ['responsive'],
float: ['responsive'],
fontFamily: ['responsive'],
fontSize: ['responsive'],
fontSmoothing: ['responsive'],
fontStyle: ['responsive'],
fontVariantNumeric: ['responsive'],
fontWeight: ['responsive'],
gap: ['responsive'],
gradientColorStops: ['responsive', 'dark', 'hover', 'focus'],
gridAutoColumns: ['responsive'],
gridAutoFlow: ['responsive'],
gridAutoRows: ['responsive'],
gridColumn: ['responsive'],
gridColumnEnd: ['responsive'],
gridColumnStart: ['responsive'],
gridRow: ['responsive'],
gridRowEnd: ['responsive'],
gridRowStart: ['responsive'],
gridTemplateColumns: ['responsive'],
gridTemplateRows: ['responsive'],
height: ['responsive'],
inset: ['responsive'],
justifyContent: ['responsive'],
justifyItems: ['responsive'],
justifySelf: ['responsive'],
letterSpacing: ['responsive'],
lineHeight: ['responsive'],
listStylePosition: ['responsive'],
listStyleType: ['responsive'],
margin: ['responsive'],
maxHeight: ['responsive'],
maxWidth: ['responsive'],
minHeight: ['responsive'],
minWidth: ['responsive'],
objectFit: ['responsive'],
objectPosition: ['responsive'],
opacity: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
order: ['responsive'],
outline: ['responsive', 'focus-within', 'focus'],
overflow: ['responsive'],
overscrollBehavior: ['responsive'],
padding: ['responsive'],
placeContent: ['responsive'],
placeItems: ['responsive'],
placeSelf: ['responsive'],
placeholderColor: ['responsive', 'dark', 'focus'],
placeholderOpacity: ['responsive', 'dark', 'focus'],
pointerEvents: ['responsive'],
position: ['responsive'],
resize: ['responsive'],
ringColor: ['responsive', 'dark', 'focus-within', 'focus'],
ringOffsetColor: ['responsive', 'dark', 'focus-within', 'focus'],
ringOffsetWidth: ['responsive', 'focus-within', 'focus'],
ringOpacity: ['responsive', 'dark', 'focus-within', 'focus'],
ringWidth: ['responsive', 'focus-within', 'focus'],
rotate: ['responsive', 'hover', 'focus'],
scale: ['responsive', 'hover', 'focus'],
skew: ['responsive', 'hover', 'focus'],
space: ['responsive'],
stroke: ['responsive'],
strokeWidth: ['responsive'],
tableLayout: ['responsive'],
textAlign: ['responsive'],
textColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
textDecoration: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
textOpacity: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
textOverflow: ['responsive'],
textTransform: ['responsive'],
transform: ['responsive'],
transformOrigin: ['responsive'],
transitionDelay: ['responsive'],
transitionDuration: ['responsive'],
transitionProperty: ['responsive'],
transitionTimingFunction: ['responsive'],
translate: ['responsive', 'hover', 'focus'],
userSelect: ['responsive'],
verticalAlign: ['responsive'],
visibility: ['responsive'],
whitespace: ['responsive'],
width: ['responsive'],
wordBreak: ['responsive'],
zIndex: ['responsive', 'focus-within', 'focus'],
accessibility: ["responsive", "focus-within", "focus"],
alignContent: ["responsive"],
alignItems: ["responsive"],
alignSelf: ["responsive"],
animation: ["responsive"],
appearance: ["responsive"],
backgroundAttachment: ["responsive"],
backgroundClip: ["responsive"],
backgroundColor: [
"responsive",
"dark",
"group-hover",
"focus-within",
"hover",
"focus",
],
backgroundImage: ["responsive"],
backgroundOpacity: [
"responsive",
"dark",
"group-hover",
"focus-within",
"hover",
"focus",
],
backgroundPosition: ["responsive"],
backgroundRepeat: ["responsive"],
backgroundSize: ["responsive"],
borderCollapse: ["responsive"],
borderColor: [
"responsive",
"dark",
"group-hover",
"focus-within",
"hover",
"focus",
],
borderOpacity: [
"responsive",
"dark",
"group-hover",
"focus-within",
"hover",
"focus",
],
borderRadius: ["responsive"],
borderStyle: ["responsive"],
borderWidth: ["responsive"],
boxShadow: ["responsive", "group-hover", "focus-within", "hover", "focus"],
boxSizing: ["responsive"],
clear: ["responsive"],
container: ["responsive"],
cursor: ["responsive"],
display: ["responsive"],
divideColor: ["responsive", "dark"],
divideOpacity: ["responsive", "dark"],
divideStyle: ["responsive"],
divideWidth: ["responsive"],
fill: ["responsive"],
flex: ["responsive"],
flexDirection: ["responsive"],
flexGrow: ["responsive"],
flexShrink: ["responsive"],
flexWrap: ["responsive"],
float: ["responsive"],
fontFamily: ["responsive"],
fontSize: ["responsive"],
fontSmoothing: ["responsive"],
fontStyle: ["responsive"],
fontVariantNumeric: ["responsive"],
fontWeight: ["responsive"],
gap: ["responsive"],
gradientColorStops: ["responsive", "dark", "hover", "focus"],
gridAutoColumns: ["responsive"],
gridAutoFlow: ["responsive"],
gridAutoRows: ["responsive"],
gridColumn: ["responsive"],
gridColumnEnd: ["responsive"],
gridColumnStart: ["responsive"],
gridRow: ["responsive"],
gridRowEnd: ["responsive"],
gridRowStart: ["responsive"],
gridTemplateColumns: ["responsive"],
gridTemplateRows: ["responsive"],
height: ["responsive"],
inset: ["responsive"],
justifyContent: ["responsive"],
justifyItems: ["responsive"],
justifySelf: ["responsive"],
letterSpacing: ["responsive"],
lineHeight: ["responsive"],
listStylePosition: ["responsive"],
listStyleType: ["responsive"],
margin: ["responsive"],
maxHeight: ["responsive"],
maxWidth: ["responsive"],
minHeight: ["responsive"],
minWidth: ["responsive"],
objectFit: ["responsive"],
objectPosition: ["responsive"],
opacity: ["responsive", "group-hover", "focus-within", "hover", "focus"],
order: ["responsive"],
outline: ["responsive", "focus-within", "focus"],
overflow: ["responsive"],
overscrollBehavior: ["responsive"],
padding: ["responsive"],
placeContent: ["responsive"],
placeItems: ["responsive"],
placeSelf: ["responsive"],
placeholderColor: ["responsive", "dark", "focus"],
placeholderOpacity: ["responsive", "dark", "focus"],
pointerEvents: ["responsive"],
position: ["responsive"],
resize: ["responsive"],
ringColor: ["responsive", "dark", "focus-within", "focus"],
ringOffsetColor: ["responsive", "dark", "focus-within", "focus"],
ringOffsetWidth: ["responsive", "focus-within", "focus"],
ringOpacity: ["responsive", "dark", "focus-within", "focus"],
ringWidth: ["responsive", "focus-within", "focus"],
rotate: ["responsive", "hover", "focus"],
scale: ["responsive", "hover", "focus"],
skew: ["responsive", "hover", "focus"],
space: ["responsive"],
stroke: ["responsive"],
strokeWidth: ["responsive"],
tableLayout: ["responsive"],
textAlign: ["responsive"],
textColor: [
"responsive",
"dark",
"group-hover",
"focus-within",
"hover",
"focus",
],
textDecoration: [
"responsive",
"group-hover",
"focus-within",
"hover",
"focus",
],
textOpacity: [
"responsive",
"dark",
"group-hover",
"focus-within",
"hover",
"focus",
],
textOverflow: ["responsive"],
textTransform: ["responsive"],
transform: ["responsive"],
transformOrigin: ["responsive"],
transitionDelay: ["responsive"],
transitionDuration: ["responsive"],
transitionProperty: ["responsive"],
transitionTimingFunction: ["responsive"],
translate: ["responsive", "hover", "focus"],
userSelect: ["responsive"],
verticalAlign: ["responsive"],
visibility: ["responsive"],
whitespace: ["responsive"],
width: ["responsive"],
wordBreak: ["responsive"],
zIndex: ["responsive", "focus-within", "focus"],
},
plugins: [
plugin(function ({ addUtilities }) {
plugin(function({ addUtilities }) {
const newUtilities = {
'.filter-none': {
filter: 'none',
".filter-none": {
filter: "none",
},
'.filter-noncolor': {
filter: 'grayscale(100%)',
".filter-noncolor": {
filter: "grayscale(100%)",
},
}
addUtilities(newUtilities, ['hover'])
};
addUtilities(newUtilities, ["hover"]);
}),
require('@tailwindcss/line-clamp'),
require("@tailwindcss/line-clamp"),
],
}
};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment