{"slug": "show-hn-windstrap-bootstrap-5-3-8-to-tailwind-css-using-deepseek-v4-flash", "title": "Show HN: WindStrap – Bootstrap 5.3.8 to Tailwind CSS Using DeepSeek V4 Flash", "summary": "WindStrap, a drop-in stylesheet that translates Bootstrap 5.3.8 to Tailwind CSS using DeepSeek V4 Flash, has been released on Hacker News. It re-declares every Bootstrap class as plain CSS that pulls in Tailwind utilities via the @apply directive, preserving Bootstrap's exact class names and theming while using Tailwind's pipeline. The project includes full support for layout, components, utilities, and responsive variants across all six Bootstrap breakpoints.", "body_md": "**Bootstrap 5.3.8 → Tailwind CSS**, translated 1:1 by composing Tailwind utilities with the ** @apply** directive.\n\nWindStrap is a drop-in stylesheet that gives you Bootstrap's exact class names (`.btn-primary`\n\n, `.col-md-6`\n\n, `.d-flex`\n\n, `.text-bg-success`\n\n, …) built on top of Tailwind's utility engine — so you get Bootstrap's API with Tailwind's pipeline (JIT output, PurgeCSS-style tree-shaking, familiar utility syntax for custom tweaks).\n\nEvery Bootstrap class is re-declared as plain CSS that pulls in Tailwind utilities via `@apply`\n\n:\n\n```\n/* src/sections/buttons.css */\n.btn-primary {\n  @apply bg-primary text-white border-primary\n    hover:bg-[#0b5ed7] hover:border-[#0a58ca]\n    active:bg-[#0a58ca] active:border-[#0a53be]\n    active:shadow-[inset_0_3px_5px_rgba(0,0,0,0.125)];\n  --bs-btn-focus-shadow-rgb: 49, 132, 253;\n}\n/* src/generated/grid.css  (machine-generated, but real @apply CSS) */\n.col-sm-6 { @apply sm:w-1/2; }          /* → @media (min-width: 576px) { width: 50% } */\n.mt-sm-3 { @apply sm:mt-[1rem] !important; }\n.d-md-none { @apply md:hidden !important; }\n```\n\nTo make the responsive variants line up **exactly** with Bootstrap, the Tailwind theme's `screens`\n\nare set to Bootstrap's breakpoints:\n\n| Name | Bootstrap | Tailwind `screens` |\n|---|---|---|\n`sm` |\n576px | 576px |\n`md` |\n768px | 768px |\n`lg` |\n992px | 992px |\n`xl` |\n1200px | 1200px |\n`xxl` |\n1400px | 1400px |\n\nBootstrap's full CSS custom-property design tokens (`--bs-primary`\n\n, `--bs-body-bg`\n\n, …) are preserved in `src/sections/root.css`\n\n, including the `[data-bs-theme=\"dark\"]`\n\noverrides, so Bootstrap's theming and dark mode keep working.\n\n**Layout**— containers,`.row`\n\n,`.col-*`\n\n,`.col-sm…xxl-*`\n\n,`.row-cols-*`\n\n,`.offset-*`\n\n, gutters (`.g-*`\n\n,`.gx-*`\n\n,`.gy-*`\n\n) across all 6 breakpoints**Content**— headings,`.display-*`\n\n,`.lead`\n\n, lists, blockquotes, images, figures, tables (incl. striped/hover/bordered/thematic variants + responsive wrappers)**Forms**—`.form-control`\n\n(± sm/lg/plaintext/color),`.form-select`\n\n, checks/radios/switches,`.form-range`\n\n,`.form-floating`\n\n,`.input-group`\n\n, validation states**Components**— buttons (all solid/outline/link variants, sizes, groups), dropdowns, nav & navbar (incl.`.navbar-expand-*`\n\n), cards, accordion, breadcrumb, pagination, badges, alerts, progress, list-groups (incl. thematic + horizontal), close buttons, toasts**Overlays**— modal (incl. fullscreen variants), tooltips, popovers, carousel, spinners, offcanvas, placeholders** Helpers**—`.text-bg-*`\n\n,`.link-*`\n\nhelpers, focus rings, icon links, ratios, fixed/sticky positioning, h/v-stack,`.visually-hidden`\n\n,`.stretched-link`\n\n,`.text-truncate`\n\n,`.vr`\n\n**Utilities**— alignment, float, object-fit, opacity, overflow, display, shadows, position/translate, borders, sizing, flexbox (all justify/align/order utilities), spacing (`m/p/g`\n\nincl.`auto`\n\n), typography (`.fs-*`\n\n,`.fw-*`\n\n,`.lh-*`\n\n, text transform/decoration), text/background colors incl. subtle & emphasis variants and`*-opacity`\n\nmodifiers, user-select, rounded corners (all sides/sizes), visibility, z-index**Responsive variants**— every utility family at`sm`\n\n/`md`\n\n/`lg`\n\n/`xl`\n\n/`xxl`\n\n, plus`.d-print-*`\n\nA few classes (e.g. `.border`\n\n, `.m-0`\n\n, `.w-auto`\n\n, `.overflow-hidden`\n\n, `.shadow`\n\n, `.opacity-25`\n\n, `.rounded`\n\n, `.visible`\n\n) would create a circular dependency if the class name matched the applied utility name, so they are written as the equivalent raw declaration — their values are byte-for-byte Bootstrap's.\n\n```\nWindStrap/\n├─ .github/workflows/pages.yml  # GitHub Pages build + deploy\n├─ tailwind.config.js        # Bootstrap screens + palette, fonts\n├─ postcss.config.js\n├─ scripts/\n│  ├─ generate-utilities.js  # generates the repetitive grid/utility/responsive CSS\n│  └─ build-docs.js          # assembles the docs site from site/ fragments\n├─ src/\n│  ├─ windstrap.css          # entry point (imports Tailwind + sections)\n│  └─ sections/              # hand-authored @apply translations\n│     ├─ root.css            # design tokens + reboot\n│     ├─ layout.css          # containers, row base\n│     ├─ content.css         # typography, images, tables\n│     ├─ forms.css\n│     ├─ buttons.css\n│     ├─ nav.css\n│     ├─ components.css\n│     ├─ overlays.css\n│     └─ helpers.css\n│  └─ generated/             # produced by scripts/generate-utilities.js\n│     ├─ grid.css\n│     ├─ utilities.css\n│     └─ responsive.css\n├─ site/                     # docs sources (layout shell + content fragments)\n│  ├─ _layout.html\n│  └─ content/               # one folder per section\n│     ├─ customize/          # 7 pages\n│     ├─ layout/             # 8 pages\n│     ├─ content/            # 6 pages\n│     ├─ forms/              # 9 pages\n│     ├─ components/         # 23 pages\n│     ├─ helpers/            # 12 pages\n│     └─ utilities/          # 20 pages\n├─ docs/                     # built docs site (85 pages)\n│  ├─ index.html             # section overview\n│  ├─ css/docs.css           # docs layout (mirrors getbootstrap.com)\n│  ├─ js/docs.js             # copy buttons, TOC scrollspy, demo init\n│  └─ <section>/*.html       # one folder per translated section\n├─ index.html                # redirects to docs/index.html\n├─ demo.html                 # demo of the translated classes\n└─ dist/\n   └─ windstrap.css          # compiled output\nnpm install\nnpm run build      # regenerate + compile  →  dist/windstrap.css\nnpm run docs       # assemble docs pages   →  docs/\nnpm run build:all  # both\nnpm run watch      # rebuild CSS on change\n```\n\nUse it by linking the compiled file:\n\n```\n<link rel=\"stylesheet\" href=\"dist/windstrap.css\">\n```\n\nThe project ships with a `Dockerfile`\n\n+ `compose.yaml`\n\nso you can build it\nentirely inside a container — no need to install Node.js or npm locally.\n\n```\n# one-time image build (installs node_modules inside the container)\ndocker compose build\n\n# run the npm scripts through Docker\ndocker compose run --rm build      # -> dist/windstrap.css\ndocker compose run --rm docs       # -> docs/ pages\ndocker compose run --rm build-all  # both\ndocker compose up watch            # watch mode (foreground; Ctrl+C to stop)\n```\n\nOn Windows/PowerShell you can use the convenience wrapper (same commands):\n\n``` php\n.\\windstrap.ps1            # build:all\n.\\windstrap.ps1 docs       # -> docs/ pages\n.\\windstrap.ps1 watch\n.\\windstrap.ps1 shell      # open a shell inside the container\n```\n\nHow it works: your project folder is bind-mounted at `/app`\n\n, and\n`node_modules`\n\nlives in a named Docker volume — so generated files\n(`dist/`\n\n, `docs/`\n\n) appear on your disk while the container keeps its own\nLinux-installed dependencies. The image is `node:20-alpine`\n\n(Node 20, matching\nthe project's tooling).\n\nThe repo ships with a GitHub Actions workflow (`.github/workflows/pages.yml`\n\n)\nthat builds the CSS + docs and publishes them to GitHub Pages on every push to\n`main`\n\n(it also builds the docs from source, so `site/`\n\nstays the source of\ntruth).\n\n- Push the repo to GitHub.\n- In the repo go to\n**Settings → Pages → Source** and choose**“GitHub Actions”**(do** not**pick “Deploy from a branch” — the workflow handles the build and deploy itself). - The first deploy publishes the site to\n`https://<user>.github.io/<repo>/`\n\n.\n\nHow it's served: the workflow stages `index.html`\n\n, `demo.html`\n\n, `dist/`\n\nand\n`docs/`\n\ninto the Pages root, mirroring the repo layout. `index.html`\n\nredirects\nstraight to `docs/index.html`\n\n, and because `dist/`\n\nis included at the root,\nall the docs pages keep their styling (their `../../dist/windstrap.css`\n\nrelative paths resolve correctly).\n\nOpen `docs/index.html`\n\nin a browser to browse the translated docs — all of\n**Customize** (7), **Layout** (8), **Content** (6), **Forms** (9),\n**Components** (23), **Helpers** (12) and **Utilities** (20) are translated\n(85 pages, `docs/<section>/<page>.html`\n\n). Getting Started, Extend and About are\nintentionally not translated.\n\nThe bundled\n\n`dist/windstrap.css`\n\nis the full translation. Because every class is defined via`@apply`\n\n, Tailwind only emits rules that are actually used — if you want a trimmed build, add your own HTML/JS files to`content`\n\nin`tailwind.config.js`\n\n(keep the`.css`\n\nfiles out of`content`\n\n, see the note there).\n\n- Tailwind\n`screens`\n\nare redefined to Bootstrap's breakpoints — this is intentional and scoped to this stylesheet. - Component color systems (buttons, alerts, list-groups,\n`text-bg-*`\n\n, links) intentionally reuse Bootstrap's RGB/token CSS variables so`--bs-*-opacity`\n\nmodifiers and`[data-bs-theme]`\n\ndark mode keep working. - Pseudo-elements, keyframes, and child-targeting selectors (e.g.\n`.row-cols-2 > *`\n\n) are written as plain CSS —`@apply`\n\ncannot express those. - The\n`docs/`\n\nsite is the official docs layout rebuilt on WindStrap. It includes Bootstrap's JS bundle (and Popper) so interactive demos (dropdowns, modals, collapse, carousel…) work — the WindStrap translation itself covers the CSS layer only.\n\nThis project was built with assistance from AI, using **DeepSeek V4 Flash** as the coding model. Current cost of the project is $0.39.\n\nMIT", "url": "https://wpnews.pro/news/show-hn-windstrap-bootstrap-5-3-8-to-tailwind-css-using-deepseek-v4-flash", "canonical_source": "https://github.com/rip747/windstrap", "published_at": "2026-08-12 23:08:39+00:00", "updated_at": "2026-08-12 23:41:46.014891+00:00", "lang": "en", "topics": ["developer-tools", "ai-tools"], "entities": ["WindStrap", "Bootstrap", "Tailwind CSS", "DeepSeek V4 Flash", "Hacker News"], "alternates": {"html": "https://wpnews.pro/news/show-hn-windstrap-bootstrap-5-3-8-to-tailwind-css-using-deepseek-v4-flash", "markdown": "https://wpnews.pro/news/show-hn-windstrap-bootstrap-5-3-8-to-tailwind-css-using-deepseek-v4-flash.md", "text": "https://wpnews.pro/news/show-hn-windstrap-bootstrap-5-3-8-to-tailwind-css-using-deepseek-v4-flash.txt", "jsonld": "https://wpnews.pro/news/show-hn-windstrap-bootstrap-5-3-8-to-tailwind-css-using-deepseek-v4-flash.jsonld"}}