Topics

• What is a functional CSS approach to writing CSS, and examples of libraries.
• Tailwind CSS – the “top dog” of functional (utility) CSS libraries

Tutorials

This tutorial teaches the fundamentals of setting up a tailwind project and working with a sample tailwind project. There are a few changes to tailwind since this tutorial, so bold values are changes. Here is a summary of the setup:

1. SETTINGS
   Settings: search for live server and set live server > settings: Full Reload true (checked in settings)
   OR add to you settings JSON
   "liveServer.settings.fullReload": true,
   Settings: search for unknown and set CSS > Lint: Unknown at Rule (set to ignore)
2. EXTENSIONS
   Extensions: Install Tailwind CSS IntelliSense (autocomplete tailwind classes and hover to show actual CSS)
   Extensions: Install inline fold (collapses class names into an ellipsis) making HTML more readable
3. Create the package.json
   my_project directory
   npm init -y (shortcut to create package.json with defaults)
4. Install the tailwind package
   npm install tailwindcss @tailwindcss/cli
5. Create directories and files
   build/index.html
css/style.css
src/input.css
tailwind.config.js
6. Update the tailwind.config.js file and add
   /** @type {import(‘tailwindcss’).Config} */
   module.exports = {
   content: [‘./build/*.html’,],
   }
7. Edit input.css add
   @import 'tailwindcss';
8. Run the tailwind input file and output file compiler in the terminal
   npx tailwindcss -i ./src/input.css -o ./build/css/style.css --watch
9. Create the compiler script
   "tailwind": "npx tailwindcss -i ./src/input.css -o ./build/css/style.css --watch"
10. install prettier dev dependency (this helps to sort the order of classes in html which is tailwind preferred)
    npm i -D prettier-plugin-tailwindcss
11. create the prettier script
    "prettier": "npx prettier --write */.html"

Problem Set

Revisit the Tweet cards project from web design 1 or a similar piece of basic card design from Natours and rebuild it using Tailwind.

For the Blog

Give your first thoughts on the differences between working with libraries built on the principles of Component based CSS vs. Functional CSS. Which do you think you’d prefer and why? What the advantages/disadvantages of each?