Skip to main content

Day 7 - Tailwind CSS

NPM Recap

  • NPM stands for “Node Package Manager”
    • it is the package manger for the Node Runtime Environment (Javascript outside the browser)
  • NPM is used to add packages such as javascript libraries to a website or app.
  • Start an NPM project by running npm init
    • this will walk you through setting up a basic project
  • the package.json file is where your dependencies and project info are listed
    • scripts are actions that you can run, you set them up in the package.json file
      • ie: dev: "node ./app.js" would mean for you to use the command npm run dev to run the app.js file
  • ALWAYS have a .gitignore file in your project and add node_modules to it
  • you install packages with the command npm install or npm i inside your project folder
    • to install a package globally, add the flag -g
    • run npm i in the root folder of your project
  • the dependencies files are stored in node_modules/
  • Read the documentation for the packages and libraries that you are using

Assignments

NPM Achievements

  • Due November 10th
  • Finish 4 Achievements at 5 points each

Tailwind Assignment

  • Due November 15
  • Set up tailwind in a project (install with npm)
  • Style content using tailwind syntax

What is a CSS Framework?

CSS Frameworks are designed to make styling content easier and more maintainable. Technology and design are both fast moving fields and in web development, developers need to be able to respond to changes in branding and design concepts with minimal breaking changes and tech debt.

Frameworks such as tailwind aim to make styling web content easier, there are many different options that you have and they all have different workflows and goals.

  • Tailwind CSS: Utility first css, highly customizable
  • Bootstrap: Component focused, lots of pre-built components, backed by twitter
  • Bulma: No Javascript, fairly easy to learn
  • Uikit: Minimalism, not very customizable
  • Vuetify: Vue Ui library, material design, vue focused

Difference Between a CSS Framework and CSS Preprocessors

You’ll come across these terms often:

  • SASS
  • SCSS
  • LESS
  • Stylus

These are all css pre-processors and not css frameworks. They are used to extend css with additional functionality such as nested classes, mixins, and conditional logic.

While they are not css frameworks, they can be used with frameworks if you so desire. Just remember that more packages means more dependencies and more configuration to make everything work right.

Tailwind CSS

This is a utility class framework which means that the stylesheet is not component focused.

Basic Concepts

  • Utility First Fundamentals
    • utility classes are used to style content
    • component concepts occur at content level, not stylesheet level
  • Responsive design
    • Tailwind is mobile first, so when setting breakpoints, the smallest size is default and you add larger breakpoints for changes
  • Theme Configuration
    • Less of a concept and more of a method
      • Tailwind uses a well structured configuration to define utility styles
      • In your configuration, you set your default sizes, hover shades, colors… mostly everything
      • You can also use @layer base{} in a css file to generate your own base styles - this is especially helpful for fonts
  • Aggressive Reset
    • Tailwind has a pretty intense reset
    • It removes all base styles so you have complete control
  • When does tailwind excel?
    • When you’re using a templating system or framework where your content code is organized into small reusable components. These often have scoped styles which means that any css added to them is only relevant inside the component.

Breakout: A Tailwind Experiment [15min]

Configuring Tailwind

Tailwind as an NPM Dependency

Most npm packages require some level of configuration to make them work in a project. This will vary from package to package and also project to project. The most important takeaway here is to familiarize yourself with using docs to properly set up an npm package in your project - and in a way that enhances our project.

Breakout Session: Tailwind Setup (10min)

Tailwind Configuration (10min)

These are a collection of doc pages from tailwind’s website that you will likely find useful.

Lab Time

  • Main Room: Discuss Mockup Assignment
  • Activity: Continue experimenting with tailwind in your fork of the provided repo from earlier
    • recommended if you feel like you need a bit more practice
  • Work on Assignments