Design from the smallest screen size to the biggest, instead of biggest to smallest; sizes are calculated referencing 4px as 1 unit. These are the two most important concepts of TailwindCSS, but they're not understood nor followed nowhere near enough.
The first is a mental model based on the current state of web development, where the responsiveness of your website is of extreme importance due to mobile screens coming in all shapes, sizes, and changing orientation from portrait to landscape. There are at least 4 size breakpoints that you must deal with in a modern web app, and TailwindCSS allows you to target each of them. However, it is extremely important to understand that this framework is mobile first! Attributes that don't have a size pseudo-class (sm:, md:, lg:, etc.) should always be targeting the smallest screen size you'll support.
The second concept exists because of the browser, as it bases every measurement relative the font size. TailwindCSS defines the font size as 16px, and, from there, it defines its size 1 = 4px, which is 0.25rem, used in classes such as w-1 for a width of 4px. But why this very specific size? Because numbers that are exponents of base 2 (4 = 2²; 16 = 2⁴) are compatible with the geometry of a LED screen. If you don't use a power of two, you might end up with a fractional number when dividing the size of an element. If you start this whole math from 14px, making an item be 4 times smaller (0.25rem) would be 3.5px, which won't be rendered crisply by any current LED screen.
Keep those two concepts in mind and TailwindCSS won't be such a headache as people make it out to be.
The first is a mental model based on the current state of web development, where the responsiveness of your website is of extreme importance due to mobile screens coming in all shapes, sizes, and changing orientation from portrait to landscape. There are at least 4 size breakpoints that you must deal with in a modern web app, and TailwindCSS allows you to target each of them. However, it is extremely important to understand that this framework is mobile first! Attributes that don't have a size pseudo-class (sm:, md:, lg:, etc.) should always be targeting the smallest screen size you'll support.
The second concept exists because of the browser, as it bases every measurement relative the font size. TailwindCSS defines the font size as 16px, and, from there, it defines its size 1 = 4px, which is 0.25rem, used in classes such as w-1 for a width of 4px. But why this very specific size? Because numbers that are exponents of base 2 (4 = 2²; 16 = 2⁴) are compatible with the geometry of a LED screen. If you don't use a power of two, you might end up with a fractional number when dividing the size of an element. If you start this whole math from 14px, making an item be 4 times smaller (0.25rem) would be 3.5px, which won't be rendered crisply by any current LED screen.
Keep those two concepts in mind and TailwindCSS won't be such a headache as people make it out to be.