Modern CSS with Tailwind (Pragmatic Bookshelf)

PragmaticBookshelf
Tailwind CSS is an exciting new CSS framework that allows you to design your site by composing simple utility classes to create complex effects. With Tailwind, you can style your text, move your items on the page, design complex page layouts, and adapt your design for devices from a phone to a wide-screen monitor. With this book, you’ll learn how to use the Tailwind for its flexibility and its consistency, from the smallest detail of your typography to the entire design of your site.

Noel Rappin @noelrappin

edited by Katharine Dvorak @katied

Tailwind CSS is an exciting new CSS framework that allows you to design your site by composing simple utility classes to create complex effects. With Tailwind, you can style your text, move your items on the page, design complex page layouts, and adapt your design for devices from a phone to a wide-screen monitor. With this book, you’ll learn how to use the Tailwind for its flexibility and its consistency, from the smallest detail of your typography to the entire design of your site.

With CSS, you can do amazing things to the basic text and images on your website, and with just a little bit of client-side code to add and remove CSS classes, you can do exponentially more. CSS can also be hard to debug, complicated to write, and hard to maintain—but it doesn’t have to be. With Tailwind, you can minimize the amount of CSS you need to write, making it easier to control and debug, and yet still enjoy full flexibility and consistency across your site. Use Tailwind to build complex page layouts, add responsive design that adjusts to different screen widths, and dramatically reduce the amount of CSS you need.

The Tailwind setup is extremely explicit, and makes it possible to understand the display just by looking at the HTML markup. Start by designing the typographic details of the individual elements, then placing and manipulating those elements in “the box”—the rectangle of space each element takes up on screen—using a flexbox or grid design. Move those elements around the page with helpful small animations and transitions. With Tailwind, it’s easy to prototype, iterate, and customize your display. Use prefixes to specify behavior. Change defaults, add new behavior, or integrate with legacy CSS.

Use Tailwind to make extraordinary web designs without extraordinary effort.


Noel Rappin is a Staff Engineer at Root Insurance. Noel has authored multiple technical books, including Modern Front End Development For Rails and Rails 5 Test Prescriptions. He also hosted the podcast Tech Done Right. Follow Noel on Twitter at @noelrap and online at noelrappin.com.


Don’t forget you can get 35% off with your Devtalk discount! Just use the coupon code “devtalk.com" at checkout :+1:

Latest Threads About This Book Top

rustkas
It would be nice if your example projects were less technology specific. I try to reimplement them as a simple project (just html and css).
New
mafinar
I (re-)realized I had the book “Modern CSS with Tailwind” bought, never read a page of it until today. With me being a fast reader and th...
New
gilesdotcodes
In case this helps anyone, I’ve had issues setting up the rails source code. Here were the solutions: In Gemfile, change gem 'rails' t...
New
Mung
Title: Modern CSS with Tailwind: exception raised on image_pack_tag (page 4) The text in the book about this helper leaves much to be de...
New
Mung
Title: Modern CSS with Tailwind: bin/setup not working on windows (page 4) $ bin/setup doesn’t work on Windows Tried $ ruby bin/setup. ...
New
Mung
No love for Windows developers? Hopefully this will be addressed before final publication.
New
JohnS
I can’t setup the Rails source code. This happens in a working directory containing multiple (postgres) Rails apps. With: ruby-3.0.0 s...
New
siestamark
Congratulations on a fine book on TailwindCSS. I appreciate your very helpful work. It is very timely and nicely done. In the Utilities ...
New
aejaz
Chapter 1 makes it hard even to begin if one doesn’t have front end tooling experience. I am a back end developer trying to understand li...
New
nuin
Hi I am having issues running the example code, tried on two machines (one I did install Ruby 3.0.0, but the this one is on one with an ...
New

Most Active This Week Top

Most Active This Month Top

Most Active This Year Top

Most Active Last Three Years Top

Most Active Over Three Years Top

PragmaticBookshelf
Tailwind CSS is an exciting new CSS framework that allows you to design your site by composing simple utility classes to create complex e...
New
mafinar
I (re-)realized I had the book “Modern CSS with Tailwind” bought, never read a page of it until today. With me being a fast reader and th...
New
gilesdotcodes
In case this helps anyone, I’ve had issues setting up the rails source code. Here were the solutions: In Gemfile, change gem 'rails' t...
New
JohnS
I can’t setup the Rails source code. This happens in a working directory containing multiple (postgres) Rails apps. With: ruby-3.0.0 s...
New
nuin
Hi I am having issues running the example code, tried on two machines (one I did install Ruby 3.0.0, but the this one is on one with an ...
New
aejaz
Chapter 1 makes it hard even to begin if one doesn’t have front end tooling experience. I am a back end developer trying to understand li...
New
siestamark
Congratulations on a fine book on TailwindCSS. I appreciate your very helpful work. It is very timely and nicely done. In the Utilities ...
New
Mung
No love for Windows developers? Hopefully this will be addressed before final publication.
New
rustkas
It would be nice if your example projects were less technology specific. I try to reimplement them as a simple project (just html and css).
New
Mung
Title: Modern CSS with Tailwind: exception raised on image_pack_tag (page 4) The text in the book about this helper leaves much to be de...
New
Mung
Title: Modern CSS with Tailwind: bin/setup not working on windows (page 4) $ bin/setup doesn’t work on Windows Tried $ ruby bin/setup. ...
New

Get money off!

The Pragmatic Bookshelf

35% off any eBook

Simply use coupon code "devtalk.com" at checkout. See full details here.