React Typescript Tailwind Component Library

Use

``javascript
yarn add techtessy
npm i techtessy
`

$3

`javascript
yarn add tailwindcss @tailwindcss/aspect-ratio @tailwindcss/forms @tailwindcss/line-clamp @tailwindcss/typography @headlessui/react
npm i tailwindcss @tailwindcss/aspect-ratio @tailwindcss/forms @tailwindcss/line-clamp @tailwindcss/typography @headlessui/react
`

$3

`javascript
module.exports = {
content: [
"./public/*/.html",
"./src/*/.{js,ts,jsx,tsx}",
"./node_modules/techtessy/*/.{html,js,ts}",
],
presets: [require("./tailwind-preset")],
darkMode: "media",
theme: {
extend: {
},
},
plugins: [],
};
`

$3

`javascript
const plugin = require("tailwindcss/plugin");

module.exports = {
theme: {
extend: {
// add BG image
// backgroundImage: {
// "bg-image":"",
// },
width: {
mapXLBg: "64rem",
mapXL: "60rem",
carouselWidth: "60rem",
},
height: {
mapSidePanelXL: "38rem",
carouselHeight: "40rem",
},
},
},
plugins: [
// popular tailwind plugins
require("@tailwindcss/typography"),
require("@tailwindcss/forms"),
require("@tailwindcss/aspect-ratio"),
require("@tailwindcss/line-clamp"),
plugin(function ({ addUtilities }) {
const utilities = {
".inset-center": {
top: "50%",
left: "50%",
"@apply -translate-x-1/2 -translate-y-1/2": {},
},
".inset-y-center": {
top: "50%",
"@apply -translate-y-1/2": {},
},
".inset-x-center": {
left: "50%",
"@apply -translate-x-1/2": {},
},
};

addUtilities(utilities, ["responsive", "hover"]);
}),
],
};
`

$3

`javascript
@tailwind base;
@tailwind components;
@tailwind utilities;
`

$3

`javascript
import "../styles/tailwind.css";
`

$3

`javascript
import { ArrowedCarousel } from "techtessy";
import { MapBusinessHoursProps} from "techtessy/lib/components/types/interfaces.types";
``

$3