Whirlwind CSS

What is whirlwind CSS?

Whirlwind CSS🌪️ is a lightweight CSS framework designed to have the classes names by short.

What do i need to run whirlwind CSS?

To run Whirlwind CSS you need Vite.

Is PurgeCSS needed?

Although PurgeCSS Is recommended, it is still completly optional.

NOTES

Transition

Whirlwind CSS has moved from the Codesandbox legacy version to an NPM.

Status

RECONTINUED, We are back!

How short the classes are

Whirlwind CSS classes are designed to be short⚡🌪️.

For comparison, the legacy whirlwind CSS used fnt-bold this NPM version uses f-bold.

How to import whirlwind

To import whirlwind follow these steps:

1. In your terminal write npm i whirlwindcss or npm install whirlwindcss
2. Install postCSS if you havent already with npm i postcss or npm install postcss
3. OPTIONAL: Install purgeCSS with npm i purgecss or npm install purgecss
4. Import whirlwindCSS
   • for JS type this line: import 'whirlwindcss/dist/classes.css';
   • for React(TSX or JSX) type this line: import 'whirlwindcss/dist/classes.css';
   • for HTML type this line: <link rel="stylesheet" href="./node_modules/whirlwindcss/dist/classes.css">
   • for TS type this line: import 'whirlwindcss/dist/classes.css';
   • for CSS type this line: @import whirlwindcss

Once done you will receive all the current whirlwind classes(If you are on the latest version).

Whirlwind CSS questions

Classes questions

Class abbreviation questions

What does ff mean in whirlwind?

ff means font-family in Whirlwind CSS.

Copyright information

Copyright (c) 2026-2027 beey12345 MIT license

A message from the creator of whirlwind CSS(A solo developer)

Have fun styling with Whirlwind CSS🌪️🌀