From e8a0e4b3f7b26c7d5b27cdb140aa19bd6288b5b4 Mon Sep 17 00:00:00 2001 From: Neeco Fabian Date: Sat, 25 Nov 2023 11:51:43 -0500 Subject: [PATCH 1/2] add Tailwind Intro and Responsiveness doc --- Topics/Tech_Stacks/Tailwind.md | 101 +++++++++++++++++++++++++++++++++ 1 file changed, 101 insertions(+) create mode 100644 Topics/Tech_Stacks/Tailwind.md diff --git a/Topics/Tech_Stacks/Tailwind.md b/Topics/Tech_Stacks/Tailwind.md new file mode 100644 index 000000000..ec936d043 --- /dev/null +++ b/Topics/Tech_Stacks/Tailwind.md @@ -0,0 +1,101 @@ +# Getting Stylish and Responsive with Tailwind CSS + +## Table of Contents +### [Introduction](#introduction) +### [Installation](#installation) +### [Usage](#usage) +### [Resources](#resources) +### [Flexibility](#flexibility) +### [Limitations](#limitations) + +## Introduction +Tired of the nuances of CSS? Tailwind is a utility-first CSS framework, which allows developers to use premade styling classes, without the need to write CSS classes from scratch. Tailwind provides small, single-purpose, reusable classes for spacing, lettering, and colours. These classes can then be used in HTML elements, or components from frontend libraries and frameworks. + +## Installation +1. When using node, install and execute Tailwind: +```bash +npm install -D tailwindcss +npx tailwindcss init +``` + +2. The generated `tailwind.config.js` configuration file contains the default setup. Give Tailwind access to files by listing the template paths in the content section. For React/TypeScript web app, it can look like this: +```js +content: [ + './pages/**/*.{ts,tsx}', + './components/**/*.{ts,tsx}', + './app/**/*.{ts,tsx}', + './src/**/*.{ts,tsx}', + ], +``` + +3. Add the following to the global CSS file: +```css +@tailwind base; +@tailwind components; +@tailwind utilities; +``` + +Now we're set! + +## Usage + +### The Basics +Each Tailwind class is focused on a specific responsibility. To use a class, add it to the `class` or `className` (when using React) attribute of the element/component. For example, use the following Tailwind classes to create a div that +- occupies the full width of the screen +- allow scrolling within +- has a sky blue background +- has large text + +```jsx +
+ {/* Some content */} +
+``` + +Start [here](https://tailwindcss.com/docs/aspect-ratio) to learn about all Tailwind classes. + +### Responsive Design +Tailwind is powerful for creating a suitable experience across different devices. + +#### Targeted Screen Sizes +To set a style for specific screen sizes, Tailwind offers breakpoints. These apply a style only if the screen width exceeds the breakpoint's minimum width. Breakpoints are an alternative to the traditional CSS `@media` queries. + +Breakpoints: +- 'sm' - 640px +- 'md' - 768px +- 'lg' - 1024px +- 'xl' - 1280px +- '2xl' - 1536px + +To denote a breakpoint, add the prefix before a class name to conditionally apply: `:` + +For example, to make the height of a div 100%, on screens more than 1024 pixels wide: +```jsx +
+ {/* Some content */} +
+``` + +> **NOTE:** A common mistake is to use 'sm' to target mobile devices. Mobile sizes have the smallest widths, so their styles should **not** have a breakpoint prefix. + + +## Flexibility +When using Tailwind CSS classes, developers are not restricted to a component structure and inherited styles that don't match their project. This can be problematic when using templates from component libraries such as [Bootstrap](https://getbootstrap.com). This flexibility makes Tailwind more customizable for different types of projects. + +Since each Tailwind class has atomic reponsibilities, developers avoid issues where a component inherits unknown CSS styles. + +Overall, Tailwind minimizes redundant CSS code and shortens CSS files. + +## Limitations +If accustomed to writing CSS, it can take some time to get used to using the equivalent Tailwind classes. + +Also, some projects may not need Tailwind. Using the framework requires additional overhead, which may not be worth it for small projects. + +It may take more time to complete projects, since Tailwind prioritizes styling control over pre-made components. + + +## Resources +- [Learning Software Engineering: CSS](./CSS.md) +- [Official Tailwind Site](https://tailwindcss.com) +- [Extended Installation](https://tailwindcss.com/docs/installation) +- [A Friendly Video Introduction](https://www.youtube.com/watch?v=pfaSUYaSgRo) From 011f3420a1667ab997744e0f3dc7168d3d180e75 Mon Sep 17 00:00:00 2001 From: Neeco Fabian Date: Sat, 25 Nov 2023 17:54:01 -0500 Subject: [PATCH 2/2] Tailwind Intro: address PR comments --- Topics/Tech_Stacks/CSS.md | 2 + Topics/Tech_Stacks/Tailwind.md | 89 ++++++++++++++++++++++------------ 2 files changed, 61 insertions(+), 30 deletions(-) diff --git a/Topics/Tech_Stacks/CSS.md b/Topics/Tech_Stacks/CSS.md index 827d57dd6..d162c775e 100644 --- a/Topics/Tech_Stacks/CSS.md +++ b/Topics/Tech_Stacks/CSS.md @@ -39,6 +39,8 @@ CSS grid is also a positioning alternative that provides a grid layout module, i Native CSS can be difficult to use, so CSS frameworks have been created so developers can use pre-made styles in order to create good looking website components, navigation bars, buttons, etc. in an easier and faster way without needing to know the semantics of CSS. Two popular CSS frameworks include [Tailwind CSS](https://tailwindcss.com/) and [Bootstrap CSS](https://getbootstrap.com/docs/3.4/css/). +For an introduction to the Tailwind framework, refer to [Getting Stylish and Responsive with Tailwind CSS](./Tailwind.md). + [React-Bootstrap](https://react-bootstrap.github.io/) is a Bootstrap CSS framework specifically for use on React apps. There is also the guide on our wiki [here](./Bootstrap.md) that can get you started on Bootstrap's basics. Generally, Bootstrap is easier to use and will produce a good looking website in a shorter amount of time, while Tailwind CSS is more customizable and can create more unique looking elements, but requires more of a time investment and is a bit harder to learn and work with compared to Bootstrap. diff --git a/Topics/Tech_Stacks/Tailwind.md b/Topics/Tech_Stacks/Tailwind.md index ec936d043..d307ebb92 100644 --- a/Topics/Tech_Stacks/Tailwind.md +++ b/Topics/Tech_Stacks/Tailwind.md @@ -4,12 +4,13 @@ ### [Introduction](#introduction) ### [Installation](#installation) ### [Usage](#usage) +### [Advantages and Limitations](#advantages-and-limitations) ### [Resources](#resources) -### [Flexibility](#flexibility) -### [Limitations](#limitations) + ## Introduction -Tired of the nuances of CSS? Tailwind is a utility-first CSS framework, which allows developers to use premade styling classes, without the need to write CSS classes from scratch. Tailwind provides small, single-purpose, reusable classes for spacing, lettering, and colours. These classes can then be used in HTML elements, or components from frontend libraries and frameworks. +Tired of the repetitive nuances of CSS? Tailwind is a utility-first CSS framework, which allows developers to use premade styling classes without the need to write CSS classes from scratch. Tailwind provides small, single-purpose, reusable classes for spacing, lettering, and colours. These classes can then be used in HTML elements, or components from frontend libraries and frameworks. + ## Installation 1. When using node, install and execute Tailwind: @@ -21,11 +22,11 @@ npx tailwindcss init 2. The generated `tailwind.config.js` configuration file contains the default setup. Give Tailwind access to files by listing the template paths in the content section. For React/TypeScript web app, it can look like this: ```js content: [ - './pages/**/*.{ts,tsx}', - './components/**/*.{ts,tsx}', - './app/**/*.{ts,tsx}', - './src/**/*.{ts,tsx}', - ], + './pages/**/*.{ts,tsx}', + './components/**/*.{ts,tsx}', + './app/**/*.{ts,tsx}', + './src/**/*.{ts,tsx}', + ] ``` 3. Add the following to the global CSS file: @@ -37,15 +38,18 @@ content: [ Now we're set! -## Usage +> **TIP:** For VSCode users, consider installing the [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) extension, which offers autocomplete suggestions, linting, and previews when hovering over classes. It's especially helpful for those starting out with the framework. + +## Usage ### The Basics Each Tailwind class is focused on a specific responsibility. To use a class, add it to the `class` or `className` (when using React) attribute of the element/component. For example, use the following Tailwind classes to create a div that -- occupies the full width of the screen -- allow scrolling within -- has a sky blue background -- has large text +- occupies the full width of the screen: `w-screen` +- allows scrolling within: `overflow-scroll` +- contains a sky blue background: `bg-sky-400` +- has large text: `text-lg` +Putting it all together: ```jsx
{/* Some content */} @@ -54,6 +58,30 @@ Each Tailwind class is focused on a specific responsibility. To use a class, add Start [here](https://tailwindcss.com/docs/aspect-ratio) to learn about all Tailwind classes. +When needed, add custom styles by modifying the `theme` section of `tailwind.config.js`. Here, we configure the `sm` breakpoint from 480px to 500px. +```js +module.exports = { + theme: { + screens: { + // sm: '480px', + sm: '500px', + md: '768px', + lg: '976px', + xl: '1440px', + } + } +} +``` + +To add custom styles inline, use square bracket `[]` notation. For example, if we want exactly 9px of padding, we can use: +```jsx +
+ {/* Some content */} +
+``` + +Refer to [Custom Styles](https://tailwindcss.com/docs/adding-custom-styles) for more information. + ### Responsive Design Tailwind is powerful for creating a suitable experience across different devices. @@ -61,11 +89,11 @@ Tailwind is powerful for creating a suitable experience across different devices To set a style for specific screen sizes, Tailwind offers breakpoints. These apply a style only if the screen width exceeds the breakpoint's minimum width. Breakpoints are an alternative to the traditional CSS `@media` queries. Breakpoints: -- 'sm' - 640px -- 'md' - 768px -- 'lg' - 1024px -- 'xl' - 1280px -- '2xl' - 1536px +- `sm` - 640px +- `md` - 768px +- `lg` - 1024px +- `xl` - 1280px +- `2xl` - 1536px To denote a breakpoint, add the prefix before a class name to conditionally apply: `:` @@ -78,20 +106,19 @@ For example, to make the height of a div 100%, on screens more than 1024 pixels > **NOTE:** A common mistake is to use 'sm' to target mobile devices. Mobile sizes have the smallest widths, so their styles should **not** have a breakpoint prefix. +#### Flexbox +For dynamically-sized layouts, Tailwind also provides classes for the standard [flexbox](https://tailwindcss.com/docs/flex) options, and controls for [flex-basis](https://tailwindcss.com/docs/flex-basis), on par with CSS. -## Flexibility -When using Tailwind CSS classes, developers are not restricted to a component structure and inherited styles that don't match their project. This can be problematic when using templates from component libraries such as [Bootstrap](https://getbootstrap.com). This flexibility makes Tailwind more customizable for different types of projects. - -Since each Tailwind class has atomic reponsibilities, developers avoid issues where a component inherits unknown CSS styles. - -Overall, Tailwind minimizes redundant CSS code and shortens CSS files. - -## Limitations -If accustomed to writing CSS, it can take some time to get used to using the equivalent Tailwind classes. - -Also, some projects may not need Tailwind. Using the framework requires additional overhead, which may not be worth it for small projects. +## Advantages and Limitations +### Advantages +- When using Tailwind CSS classes, developers are not restricted to a component structure and inherited styles that don't match their project. This can be problematic when using templates from component libraries such as [Bootstrap](https://getbootstrap.com). This flexibility makes Tailwind more customizable for different types of projects. +- Since each Tailwind class has atomic reponsibilities, developers avoid issues where a component inherits unknown CSS styles. +- Overall, Tailwind minimizes redundant CSS code and shortens CSS files. -It may take more time to complete projects, since Tailwind prioritizes styling control over pre-made components. +### Limitations +- If accustomed to writing CSS, it can take some time to get used to using the equivalent Tailwind classes. +- Some projects may not need Tailwind. Using the framework requires additional overhead, which may not be worth it for small projects. +- It may take more time to complete projects, since Tailwind prioritizes styling control over pre-made components. ## Resources @@ -99,3 +126,5 @@ It may take more time to complete projects, since Tailwind prioritizes styling c - [Official Tailwind Site](https://tailwindcss.com) - [Extended Installation](https://tailwindcss.com/docs/installation) - [A Friendly Video Introduction](https://www.youtube.com/watch?v=pfaSUYaSgRo) +- [Tailwind UI: A Component Library Styled with Tailwind CSS](https://tailwindui.com) +- [Defining States (Hover, Focus, and more)](https://tailwindcss.com/docs/hover-focus-and-other-states)