https://github.com/uppercod/atomico-tailwindcss
https://github.com/uppercod/atomico-tailwindcss
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/uppercod/atomico-tailwindcss
- Owner: UpperCod
- Created: 2020-09-22T06:24:59.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-09-22T14:27:04.000Z (over 5 years ago)
- Last Synced: 2025-10-20T11:32:34.951Z (8 months ago)
- Language: HTML
- Homepage: https://uppercod.github.io/atomico-tailwindcss/
- Size: 16.6 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Atomico + Tailwindcss + Estack
I've created [@uppercod/postcss-import](https://github.com/uppercod/postcss-import) for Postcss that allows to point to selectors of an import to compose new CSS, I've tried it with [**Atomico**](https://github.com/atomicojs/atomico) + [Tailwindcss](https://.com/components/buttons) and the result is pleasantly small.
[**Atomico**](https://github.com/atomicojs/atomico) is an amazing library of only 2.9KB for creating webcomponents just using functions.
## [Live example 👉](https://uppercod.github.io/atomico-tailwindcss/)
### webcomponent
```js
import { c } from "atomico";
import html from "atomico/html";
import style from "./t-button.css";
function button({ elevated, disabled, outline, roundedFull }) {
const cn = ["btn"];
if (elevated) cn.push("elevated");
if (disabled) cn.push("disabled");
if (outline) cn.push("disabled");
if (roundedFull) cn.push("rounded-full");
return html`
${style}
`;
}
button.props = {
rounded: Boolean,
disabled: Boolean,
elevated: Boolean,
roundedFull: Boolean,
};
customElements.define("t-button", c(button));
```
### style
```css
@import "https://unpkg.com/tailwindcss@1.7.5/dist/tailwind.css" (as: T);
.btn {
@extend T"button",
T.bg-blue-500,
T.text-white,
T.font-bold,
T.py-2,
T.px-4,
T.rounded;
border: none;
}
.btn:hover {
@extend T.hover\:bg-blue-700:hover;
}
.rounded-full {
@extend T.rounded-full;
}
.disabled {
@extend T.opacity-50, T.cursor-not-allowed;
}
.elevated {
@extend T.shadow;
}
```