bulma-tailwind 0.1.0

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "bulma-tailwind",
+  "version": "0.1.0",
+  "main": "dist/bulma-tailwind.css",
+  "style": "dist/bulma-tailwind.css",
+  "scripts": {
+    "build": "postcss src/bulma-tailwind.css -o dist/bulma-tailwind.css && copyfiles dist/bulma-tailwind.css src/example",
+    "watch": "postcss src/bulma-tailwind.css -o dist/bulma-tailwind.css --watch"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "keywords": [
+    "bulma",
+    "tailwind",
+    "css",
+    "framework",
+    "conversion",
+    "utility-classes"
+  ],
+  "author": "ajomuch92",
+  "license": "MIT",
+  "description": "This project is a conversion of the Bulma CSS framework to Tailwind CSS. It provides a set of utility classes that mimic the styles and components of Bulma, allowing developers to easily transition from Bulma to Tailwind while maintaining a familiar design system.",
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.2.2",
+    "copyfiles": "^2.4.1",
+    "postcss": "^8.5.8",
+    "postcss-cli": "^11.0.1",
+    "tailwindcss": "^4.0.0"
+  }
+}

package/src/bulma-tailwind.css

@@ -0,0 +1,45 @@
+@import "./theme.css";
+
+/* Elements */
+@import "./elements/button.css";
+@import "./elements/box.css";
+@import "./elements/content.css";
+@import "./elements/delete.css";
+@import "./elements/icon.css";
+@import "./elements/image.css";
+@import "./elements/notification.css";
+@import "./elements/progress.css";
+@import "./elements/table.css";
+@import "./elements/tag.css";
+@import "./elements/title.css";
+
+/* Components */
+@import "./components/breadcrumb.css";
+@import "./components/card.css";
+@import "./components/dropdown.css";
+@import "./components/menu.css";
+@import "./components/message.css";
+@import "./components/modal.css";
+@import "./components/navbar.css";
+@import "./components/pagination.css";
+@import "./components/panel.css";
+@import "./components/tabs.css";
+
+/* Form */
+@import "./form/general.css";
+@import "./form/input.css";
+@import "./form/textarea.css";
+@import "./form/select.css";
+@import "./form/checkbox-radio.css";
+@import "./form/file.css";
+
+/* Layout */
+@import "./layout/columns.css";
+@import "./layout/container.css";
+@import "./layout/hero.css";
+@import "./layout/section.css";
+@import "./layout/level.css";
+
+/* Media Object & Footer */
+@import "./media-object.css";
+@import "./footer.css";

package/src/components/breadcrumb.css

@@ -0,0 +1,48 @@
+@layer components {
+  .breadcrumb {
+    @apply list-none flex flex-wrap items-center;
+  }
+  .breadcrumb li {
+    @apply inline-flex items-center;
+  }
+  .breadcrumb li + li::before {
+    content: "/";
+    @apply mx-2 text-grey-dark;
+  }
+  .breadcrumb li.is-active a {
+    @apply text-primary cursor-default pointer-events-none;
+  }
+  .breadcrumb a {
+    @apply text-dark hover:text-primary transition-colors cursor-pointer;
+  }
+  /* Separadores alternativos */
+  .breadcrumb.has-arrow-separator li + li::before {
+    content: "→";
+  }
+  .breadcrumb.has-bullet-separator li + li::before {
+    content: "•";
+  }
+  .breadcrumb.has-dot-separator li + li::before {
+    content: "·";
+  }
+  .breadcrumb.has-succeeds-separator li + li::before {
+    content: "›";
+  }
+  /* Alineación */
+  .breadcrumb.is-centered {
+    @apply justify-center;
+  }
+  .breadcrumb.is-right {
+    @apply justify-end;
+  }
+  /* Tamaños */
+  .breadcrumb.is-small {
+    @apply text-sm;
+  }
+  .breadcrumb.is-medium {
+    @apply text-base;
+  }
+  .breadcrumb.is-large {
+    @apply text-lg;
+  }
+}

package/src/components/card.css

@@ -0,0 +1,17 @@
+@layer components {
+  .card {
+    @apply bg-white rounded-lg shadow-md overflow-hidden;
+  }
+  .card-header {
+    @apply px-5 py-3 border-b border-grey font-bold text-lg cursor-pointer;
+  }
+  .card-content {
+    @apply p-5;
+  }
+  .card-footer {
+    @apply px-5 py-3 border-t border-grey flex;
+  }
+  .card-footer-item {
+    @apply flex-1 text-center py-2 hover:bg-grey-light transition cursor-pointer;
+  }
+}

package/src/components/dropdown.css

@@ -0,0 +1,31 @@
+@layer components {
+  .dropdown {
+    @apply relative inline-flex;
+  }
+  .dropdown-trigger {
+    @apply inline-block;
+  }
+  .dropdown-menu {
+    @apply absolute top-full left-0 z-10 hidden min-w-48 pt-2;
+  }
+  .dropdown.is-active .dropdown-menu {
+    @apply block;
+  }
+  .dropdown-content {
+    @apply bg-white rounded-lg shadow-lg overflow-hidden;
+    border: 1px solid var(--color-grey);
+  }
+  .dropdown-item {
+    @apply block px-4 py-2 text-dark hover:bg-grey-light transition-colors cursor-pointer;
+  }
+  .dropdown-divider {
+    @apply h-px my-1 bg-grey;
+  }
+  /* Posiciones */
+  .dropdown.is-right .dropdown-menu {
+    @apply left-auto right-0;
+  }
+  .dropdown.is-up .dropdown-menu {
+    @apply bottom-full top-auto pt-0 pb-2;
+  }
+}

package/src/components/menu.css

@@ -0,0 +1,20 @@
+@layer components {
+  .menu {
+    @apply text-base;
+  }
+  .menu-list {
+    @apply space-y-1;
+  }
+  .menu-list li a {
+    @apply block px-3 py-2 rounded-md text-dark hover:bg-grey-light transition-colors cursor-pointer;
+  }
+  .menu-list li a.is-active {
+    @apply bg-primary text-white;
+  }
+  .menu-label {
+    @apply text-xs uppercase tracking-wider text-grey-dark font-semibold mb-2;
+  }
+  .menu-list ul {
+    @apply pl-4 mt-1 space-y-1;
+  }
+}

package/src/components/message.css

@@ -0,0 +1,76 @@
+@layer components {
+  .message {
+    @apply rounded-lg overflow-hidden mb-4 w-full;
+  }
+  .message-header {
+    @apply px-4 py-2 font-bold;
+    background-color: var(--color-dark);
+    color: var(--color-white);
+  }
+  .message-body {
+    @apply p-4;
+    border-left: 4px solid var(--color-dark);
+    background-color: var(--color-light);
+  }
+  /* Colores - todas las variantes */
+  .message.is-primary .message-header {
+    background-color: var(--color-primary);
+  }
+  .message.is-primary .message-body {
+    border-left-color: var(--color-primary);
+  }
+  .message.is-link .message-header {
+    background-color: var(--color-link);
+  }
+  .message.is-link .message-body {
+    border-left-color: var(--color-link);
+  }
+  .message.is-info .message-header {
+    background-color: var(--color-info);
+  }
+  .message.is-info .message-body {
+    border-left-color: var(--color-info);
+  }
+  .message.is-success .message-header {
+    background-color: var(--color-success);
+  }
+  .message.is-success .message-body {
+    border-left-color: var(--color-success);
+  }
+  .message.is-warning .message-header {
+    background-color: var(--color-warning);
+    color: var(--color-dark);
+  }
+  .message.is-warning .message-body {
+    border-left-color: var(--color-warning);
+  }
+  .message.is-danger .message-header {
+    background-color: var(--color-danger);
+  }
+  .message.is-danger .message-body {
+    border-left-color: var(--color-danger);
+  }
+  .message.is-dark .message-header {
+    background-color: var(--color-dark);
+  }
+  .message.is-dark .message-body {
+    border-left-color: var(--color-dark);
+  }
+  .message.is-light .message-header {
+    background-color: var(--color-light);
+    color: var(--color-dark);
+  }
+  .message.is-light .message-body {
+    border-left-color: var(--color-light);
+  }
+  /* Tamaños */
+  .message.is-small {
+    @apply text-sm;
+  }
+  .message.is-medium {
+    @apply text-base;
+  }
+  .message.is-large {
+    @apply text-lg;
+  }
+}

package/src/components/modal.css

@@ -0,0 +1,26 @@
+@layer components {
+  .modal {
+    @apply fixed inset-0 z-50 hidden items-center justify-center;
+  }
+  .modal.is-active {
+    @apply flex;
+  }
+  .modal-background {
+    @apply absolute inset-0 bg-black/80;
+  }
+  .modal-card {
+    @apply relative bg-white rounded-lg shadow-xl w-full max-w-md mx-4;
+  }
+  .modal-card-head {
+    @apply flex justify-between items-center p-4 border-b border-grey;
+  }
+  .modal-card-body {
+    @apply p-4;
+  }
+  .modal-card-foot {
+    @apply flex justify-end gap-2 p-4 border-t border-grey;
+  }
+  .modal-close {
+    @apply absolute top-2 right-2 w-6 h-6 rounded-full bg-grey-dark text-white flex items-center justify-center cursor-pointer;
+  }
+}

package/src/components/navbar.css

@@ -0,0 +1,20 @@
+@layer components {
+  .navbar {
+    @apply bg-white shadow-sm;
+  }
+  .navbar-brand {
+    @apply flex items-center justify-between p-3;
+  }
+  .navbar-menu {
+    @apply hidden md:flex md:items-center;
+  }
+  .navbar-start, .navbar-end {
+    @apply flex flex-col md:flex-row gap-2;
+  }
+  .navbar-item {
+    @apply px-3 py-2 hover:bg-grey-light rounded cursor-pointer;
+  }
+  .navbar-burger {
+    @apply block md:hidden cursor-pointer p-3;
+  }
+}

package/src/components/pagination.css

@@ -0,0 +1,40 @@
+@layer components {
+  .pagination {
+    @apply flex flex-wrap justify-center items-center gap-2;
+  }
+  .pagination-list {
+    @apply flex flex-wrap gap-1;
+  }
+  .pagination-link,
+  .pagination-previous,
+  .pagination-next,
+  .pagination-ellipsis {
+    @apply inline-flex items-center justify-center min-w-8 h-8 px-2 rounded-md border border-grey bg-white text-dark hover:bg-grey-light transition-colors cursor-pointer;
+  }
+  .pagination-link.is-current {
+    @apply bg-primary text-white border-primary cursor-default;
+  }
+  .pagination-previous,
+  .pagination-next {
+    @apply px-4;
+  }
+  .pagination-ellipsis {
+    @apply border-none bg-transparent cursor-default;
+  }
+  /* Tamaños */
+  .pagination.is-small .pagination-link,
+  .pagination.is-small .pagination-previous,
+  .pagination.is-small .pagination-next {
+    @apply text-sm h-6 min-w-6;
+  }
+  .pagination.is-medium .pagination-link,
+  .pagination.is-medium .pagination-previous,
+  .pagination.is-medium .pagination-next {
+    @apply text-base h-10 min-w-10;
+  }
+  .pagination.is-large .pagination-link,
+  .pagination.is-large .pagination-previous,
+  .pagination.is-large .pagination-next {
+    @apply text-lg h-12 min-w-12;
+  }
+}

package/src/components/panel.css

@@ -0,0 +1,31 @@
+@layer components {
+  .panel {
+    @apply rounded-lg shadow-sm overflow-hidden;
+    border: 1px solid var(--color-grey);
+  }
+  .panel-heading {
+    @apply px-4 py-2 font-bold border-b cursor-pointer;
+    background-color: var(--color-light);
+    border-bottom-color: var(--color-grey);
+  }
+  .panel-tabs {
+    @apply flex border-b;
+    border-bottom-color: var(--color-grey);
+  }
+  .panel-tabs a {
+    @apply flex-1 text-center py-2 hover:bg-grey-light transition-colors cursor-pointer;
+  }
+  .panel-tabs a.is-active {
+    @apply border-b-2 border-primary font-semibold;
+  }
+  .panel-block {
+    @apply flex items-center px-4 py-2 border-b hover:bg-grey-light transition-colors cursor-pointer;
+    border-bottom-color: var(--color-grey);
+  }
+  .panel-block:last-child {
+    @apply border-b-0;
+  }
+  .panel-icon {
+    @apply mr-2 text-grey-dark;
+  }
+}

package/src/components/tabs.css

@@ -0,0 +1,38 @@
+@layer components {
+  .tabs {
+    @apply flex flex-wrap border-b border-grey;
+  }
+  .tabs li {
+    @apply -mb-px;
+  }
+  .tabs li a {
+    @apply block px-4 py-2 border-b-2 border-transparent text-grey-dark hover:text-dark transition-colors cursor-pointer;
+  }
+  .tabs li.is-active a {
+    @apply border-primary text-primary font-semibold;
+  }
+  /* Alineación */
+  .tabs.is-centered {
+    @apply justify-center;
+  }
+  .tabs.is-right {
+    @apply justify-end;
+  }
+  /* Tamaños */
+  .tabs.is-small li a {
+    @apply text-sm px-2 py-1;
+  }
+  .tabs.is-medium li a {
+    @apply text-lg px-5 py-3;
+  }
+  .tabs.is-large li a {
+    @apply text-xl px-6 py-4;
+  }
+  /* Estilo toggle */
+  .tabs.is-toggle li a {
+    @apply border border-grey rounded-t-md -mb-px;
+  }
+  .tabs.is-toggle li.is-active a {
+    @apply border-primary bg-primary text-white;
+  }
+}

package/src/elements/box.css

@@ -0,0 +1,6 @@
+@layer components {
+  .box {
+    @apply bg-white rounded-lg shadow-md p-5;
+    border: 1px solid var(--color-grey);
+  }
+}

package/src/elements/button.css

@@ -0,0 +1,169 @@
+@layer components {
+  /* Botón base */
+  .button {
+    @apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded font-medium transition-all duration-200 cursor-pointer border border-transparent;
+    font-size: var(--text-size-normal);
+  }
+
+  /* Tamaños */
+  .button.is-small {
+    @apply px-2 py-1 text-sm rounded-sm;
+  }
+  .button.is-medium {
+    @apply px-5 py-2.5 text-base;
+  }
+  .button.is-large {
+    @apply px-6 py-3 text-lg;
+  }
+
+  /* Colores sólidos */
+  .button.is-primary {
+    @apply bg-primary text-white hover:bg-primary/90;
+  }
+  .button.is-link {
+    @apply bg-link text-white hover:bg-link/90;
+  }
+  .button.is-info {
+    @apply bg-info text-white hover:bg-info/90;
+  }
+  .button.is-success {
+    @apply bg-success text-white hover:bg-success/90;
+  }
+  .button.is-warning {
+    @apply bg-warning text-dark hover:bg-warning/90;
+  }
+  .button.is-danger {
+    @apply bg-danger text-white hover:bg-danger/90;
+  }
+  .button.is-light {
+    @apply bg-light text-dark hover:bg-gray-200;
+  }
+  .button.is-dark {
+    @apply bg-dark text-white hover:bg-dark/90;
+  }
+  .button.is-white {
+    @apply bg-white text-dark border-grey hover:bg-gray-50;
+  }
+  .button.is-black {
+    @apply bg-black text-white hover:bg-black/90;
+  }
+
+  /* Outlined (solo borde y texto, sin fondo) */
+  .button.is-outlined {
+    @apply bg-transparent border-current;
+  }
+  .button.is-outlined.is-primary {
+    @apply text-primary border-primary hover:bg-primary/10;
+  }
+  .button.is-outlined.is-link {
+    @apply text-link border-link hover:bg-link/10;
+  }
+  .button.is-outlined.is-info {
+    @apply text-info border-info hover:bg-info/10;
+  }
+  .button.is-outlined.is-success {
+    @apply text-success border-success hover:bg-success/10;
+  }
+  .button.is-outlined.is-warning {
+    @apply text-warning border-warning hover:bg-warning/10;
+  }
+  .button.is-outlined.is-danger {
+    @apply text-danger border-danger hover:bg-danger/10;
+  }
+  .button.is-outlined.is-light {
+    @apply text-light border-light hover:bg-light/10;
+  }
+  .button.is-outlined.is-dark {
+    @apply text-dark border-dark hover:bg-dark/10;
+  }
+  .button.is-outlined.is-white {
+    @apply text-white border-white hover:bg-white/10;
+  }
+  .button.is-outlined.is-black {
+    @apply text-black border-black hover:bg-black/10;
+  }
+
+  /* Inverted (texto del color, fondo transparente, borde transparente, hover invierte) */
+  .button.is-inverted {
+    @apply bg-transparent border-transparent;
+  }
+  .button.is-inverted.is-primary {
+    @apply text-primary hover:bg-primary hover:text-white;
+  }
+  .button.is-inverted.is-link {
+    @apply text-link hover:bg-link hover:text-white;
+  }
+  .button.is-inverted.is-info {
+    @apply text-info hover:bg-info hover:text-white;
+  }
+  .button.is-inverted.is-success {
+    @apply text-success hover:bg-success hover:text-white;
+  }
+  .button.is-inverted.is-warning {
+    @apply text-warning hover:bg-warning hover:text-dark;
+  }
+  .button.is-inverted.is-danger {
+    @apply text-danger hover:bg-danger hover:text-white;
+  }
+  .button.is-inverted.is-light {
+    @apply text-light hover:bg-light hover:text-dark;
+  }
+  .button.is-inverted.is-dark {
+    @apply text-dark hover:bg-dark hover:text-white;
+  }
+  .button.is-inverted.is-white {
+    @apply text-white hover:bg-white hover:text-dark;
+  }
+  .button.is-inverted.is-black {
+    @apply text-black hover:bg-black hover:text-white;
+  }
+
+  /* Rounded (bordes redondeados grandes) */
+  .button.is-rounded {
+    @apply rounded-full;
+  }
+
+  /* Fullwidth (ancho completo) */
+  .button.is-fullwidth {
+    @apply w-full;
+  }
+
+  /* Loading (estado de carga) */
+  .button.is-loading {
+    @apply relative text-transparent pointer-events-none;
+  }
+  .button.is-loading::after {
+    content: "";
+    @apply absolute w-4 h-4 border-2 border-t-transparent rounded-full animate-spin;
+    border-color: currentColor transparent transparent transparent;
+  }
+
+  /* Disabled (deshabilitado) */
+  .button:disabled,
+  .button.is-disabled {
+    @apply opacity-50 cursor-not-allowed pointer-events-none;
+  }
+
+  /* Text button (estilo texto sin bordes) */
+  .button.is-text {
+    @apply bg-transparent border-transparent text-dark hover:bg-grey-light;
+  }
+  .button.is-text.is-primary {
+    @apply text-primary hover:bg-primary/10;
+  }
+  .button.is-text.is-link {
+    @apply text-link hover:bg-link/10;
+  }
+  .button.is-text.is-info {
+    @apply text-info hover:bg-info/10;
+  }
+  .button.is-text.is-success {
+    @apply text-success hover:bg-success/10;
+  }
+  .button.is-text.is-warning {
+    @apply text-warning hover:bg-warning/10;
+  }
+  .button.is-text.is-danger {
+    @apply text-danger hover:bg-danger/10;
+  }
+}

package/src/elements/content.css

@@ -0,0 +1,61 @@
+@layer components {
+  .content {
+    @apply text-base text-dark leading-relaxed;
+  }
+  .content p:not(:last-child) {
+    @apply mb-4;
+  }
+  .content h1 {
+    @apply text-3xl font-bold mb-4;
+  }
+  .content h2 {
+    @apply text-2xl font-bold mb-3;
+  }
+  .content h3 {
+    @apply text-xl font-bold mb-2;
+  }
+  .content h4 {
+    @apply text-lg font-bold mb-2;
+  }
+  .content h5 {
+    @apply text-base font-bold mb-2;
+  }
+  .content h6 {
+    @apply text-sm font-bold mb-2;
+  }
+  .content ul {
+    @apply list-disc pl-6 mb-4;
+  }
+  .content ol {
+    @apply list-decimal pl-6 mb-4;
+  }
+  .content li {
+    @apply mb-1;
+  }
+  .content blockquote {
+    @apply border-l-4 border-grey pl-4 italic my-4;
+  }
+  .content pre {
+    @apply bg-grey-light p-4 rounded overflow-x-auto font-mono text-sm;
+  }
+  .content table {
+    @apply w-full border-collapse;
+  }
+  .content table td,
+  .content table th {
+    @apply border border-grey px-3 py-2;
+  }
+  .content table th {
+    @apply bg-grey-light font-bold;
+  }
+  /* Tamaños */
+  .content.is-small {
+    @apply text-sm;
+  }
+  .content.is-medium {
+    @apply text-base;
+  }
+  .content.is-large {
+    @apply text-lg;
+  }
+}