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