This repository has been archived on 2023-05-03. You can view files and clone it, but cannot push or open issues or pull requests.
ocp-wg-frontend/tailwind.config.js
2022-11-18 19:41:03 +07:00

143 lines
2.8 KiB
JavaScript

const plugin = require("tailwindcss/plugin");
const colors = require("tailwindcss/colors");
module.exports = {
purge: {
enabled: true,
content: [
"./**/*.html",
"./*.html",
"./**/*.js",
"./*.js",
"./**/*.svelte",
"./*.svelte",
],
options: {
safelist: [],
},
},
theme: {
colors: {
...colors,
},
extend: {
minHeight: {
"screen-75": "75vh",
},
fontSize: {
"55": "55rem",
},
opacity: {
"80": ".8",
},
zIndex: {
"2": 2,
"3": 3,
},
inset: {
"-100": "-100%",
"-225-px": "-225px",
"-160-px": "-160px",
"-150-px": "-150px",
"-94-px": "-94px",
"-50-px": "-50px",
"-29-px": "-29px",
"-20-px": "-20px",
"25-px": "25px",
"40-px": "40px",
"95-px": "95px",
"145-px": "145px",
"195-px": "195px",
"210-px": "210px",
"260-px": "260px",
},
height: {
"95-px": "95px",
"70-px": "70px",
"350-px": "350px",
"500-px": "500px",
"600-px": "600px",
},
maxHeight: {
"860-px": "860px",
},
maxWidth: {
"100-px": "100px",
"120-px": "120px",
"150-px": "150px",
"180-px": "180px",
"200-px": "200px",
"210-px": "210px",
"580-px": "580px",
},
minWidth: {
"140-px": "140px",
"48": "12rem",
},
backgroundSize: {
full: "100%",
},
},
},
variants: [
"responsive",
"group-hover",
"focus-within",
"first",
"last",
"odd",
"even",
"hover",
"focus",
"active",
"visited",
"disabled",
],
plugins: [
require("@tailwindcss/forms"),
plugin(function ({ addComponents, theme }) {
const screens = theme("screens", {});
addComponents([
{
".container": { width: "100%" },
},
{
[`@media (min-width: ${screens.sm})`]: {
".container": {
"max-width": "640px",
},
},
},
{
[`@media (min-width: ${screens.md})`]: {
".container": {
"max-width": "768px",
},
},
},
{
[`@media (min-width: ${screens.lg})`]: {
".container": {
"max-width": "1024px",
},
},
},
{
[`@media (min-width: ${screens.xl})`]: {
".container": {
"max-width": "1280px",
},
},
},
{
[`@media (min-width: ${screens["2xl"]})`]: {
".container": {
"max-width": "1280px",
},
},
},
]);
}),
],
};