Tailwind CSS: installation and choosing it over Bootstrap
A practical start with Tailwind 4 and Vite: utility classes, production builds, class detection and the differences from Bootstrap.
Tailwind CSS helps us build interfaces by combining small utility classes. Instead of a ready-made appearance, we get control over spacing, colour and layout. One team will find that convenient; another will see a wall of unfamiliar abbreviations. I do not buy the promise that choosing a framework will organise a project for us. We still have to design that organisation.
What utility-first actually means
A utility class controls a particular interface property. A few classes define the layout, others set spacing, typography and responses to changes in screen width. We see the rules alongside the HTML element. The documentation also describes variants for states such as hover and visible keyboard focus. [1]
The example below creates a simple card with a square button. It starts with one column and switches to two at the specified breakpoint. This illustrates the approach; it is not a complete production component.
<section class="grid gap-6 border border-amber-200 p-6 md:grid-cols-2">
<h2 class="text-2xl font-semibold">Let’s discuss your project</h2>
<a href="/en/contact" class="bg-amber-300 px-6 py-4 focus-visible:outline-2">
Contact us
</a>
</section>We can quickly check the proportions and behaviour on a phone. That does not mean every screen should get its own collection of arbitrary values. It helps to agree on recurring colours, spacing and typography first. Otherwise the tool will also speed up the production of visual disorder.
Installing Tailwind in a Vite project
This guide follows the Tailwind 4 installation path using Vite. We need a working Vite project and a supported version of Node.js. Run the following command in the project directory. Then add the plugin to the existing configuration, keeping the other integrations the project needs. [2]
npm install tailwindcss @tailwindcss/viteimport { defineConfig } from 'vite';
import tailwindcss from '@tailwindcss/vite';
export default defineConfig({
plugins: [tailwindcss()],
});Add the import to the main CSS file. The application must actually load that file; installing the packages correctly will not change anything on screen otherwise. Run the project’s usual development script and check that a visible change appears in the browser. [2]
@import "tailwindcss";Before deployment, also run a production build. Check that the resulting CSS reaches the right directory and is referenced by the HTML. A working development server does not prove that the production package is correct. Open the output without the development process and inspect the assets in the browser’s developer tools.
Be careful with guides for earlier versions
Older instructions use @tailwind directives and different configuration steps. Do not add them blindly to a version 4 installation. The official upgrade guide explains the changes and browser requirements. Version 4 targets Safari 16.4, Chrome 111 and Firefox 128 or newer. [3]
Start by checking the audience for your own product. An internal business system may run on devices that receive updates more slowly than personal phones. If the required browsers fall outside the supported range, reconsider the version choice. A new release is not more important than a working customer form.
Why some styles disappear
The generator detects complete class names in the source files it scans. Building a name from separate fragments can prevent the required rule from being found. Instead of constructing a colour class dynamically, prepare a map of complete variants. Also check that the right directories and external components are included in detection. [4]
For example, selecting a variant should return the whole bg-amber-300 class rather than append a fragment to bg-. After making changes, check the production build, not just one view during development. The problem may only appear for a less frequently used variant. Refreshing the page alone will not solve it.
Tailwind or Bootstrap: choose for the actual need
Bootstrap provides ready-made components, a grid and elements with JavaScript behaviour. It can get a conventional interface running quickly. Tailwind CSS primarily provides styling tools; we still have to implement the behaviour of a complex dialog or menu. It is not a one-for-one replacement for a complete component library. [5]
I would choose the first approach when a team needs a quick, predictable administration interface with standard elements. The second suits a custom visual system, provided shared components are maintained. There is no need to rewrite a working website simply because a different tool is popular.
Tailwind CSS still requires us to assess the finished interface. Check keyboard operation, contrast, text enlargement and mobile widths. Look at the size of the generated CSS and the consistency of reusable components. Those results should guide the choice. A long class attribute does not have to be a problem. Missing rules, responsibility and quality checks do.
Sources and verification date
2026-10-19 · English edition of the Polish article.
