Assignment 3: Tailwind CSS
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.
Popular CSS Frameworks
- 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:
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.
- Add tailwind to a project with
npm install
Breakout Session: Tailwind Setup (10min)
Tailwind Configuration (10min)
Useful links
These are a collection of doc pages from tailwind's website that you will likely find useful.
Lab Time
- Main Room: Add tailwind to the course page (Demo)
- 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
- Assignment 3: Start working on your assignment 3
- recommended if tailwind is coming fairly easy to you
Prep
Tailwind
- Tailwind CSS Editor Setup
This provides useful information on how to set up your code editor for working with tailwind.
- Tailwind CSS Utility Class Concept
Intro to the utility first philosophy of tailwind. This page also discusses some of the benefits of using a utility first approach.
- Tailwind Hover, Focus, and Other States
This page addresses how tailwind handles states such as hover. It also introduces how tailwind handles breakpoints. This is a long article, I recommend skimming it for familiarity and then coming back to it when you can apply some of the concepts.
- Responsive Design in Tailwind
This article covers how to create responsive designs by using tailwind's breakpoints.
