diff --git a/Programming Languages/Tailwind CSS/_category_.json b/Programming Languages/Tailwind CSS/_category_.json new file mode 100644 index 00000000..a09899ec --- /dev/null +++ b/Programming Languages/Tailwind CSS/_category_.json @@ -0,0 +1,8 @@ +{ + "label": "Tailwind", + "position": 8, + "link": { + "type": "generated-index", + "description": "Tailwind CSS is a design system implementation in pure CSS. It is also configurable. It gives developers super powers. It allows them to build websites with a clean consistent UI out of the box." + } +} diff --git a/Programming Languages/Tailwind CSS/core_concept/_category_.json b/Programming Languages/Tailwind CSS/core_concept/_category_.json new file mode 100644 index 00000000..3f9100d1 --- /dev/null +++ b/Programming Languages/Tailwind CSS/core_concept/_category_.json @@ -0,0 +1,8 @@ +{ + "label": "Core Concept", + "position": 8, + "link": { + "type": "generated-index", + "description": "Tailwind CSS is a design system implementation in pure CSS. It is also configurable. It gives developers super powers. It allows them to build websites with a clean consistent UI out of the box." + } +} diff --git a/Programming Languages/Tailwind CSS/core_concept/utility_first_fundamental.md b/Programming Languages/Tailwind CSS/core_concept/utility_first_fundamental.md new file mode 100644 index 00000000..32300155 --- /dev/null +++ b/Programming Languages/Tailwind CSS/core_concept/utility_first_fundamental.md @@ -0,0 +1,167 @@ +--- +id: utility_first_fundamental +title: utility_first_fundamental +sidebar_label: utility_first_fundamental +sidebar_position: 1 +tags: + - Tailwind CSS + - Getting Started + - Tailwind CSS Setup + - Tailwind CSS Installation + - Tailwind CSS Quickstart +description: This guide provides instructions on how to get started with Tailwind CSS, including installation and basic usage. +--- + +# Utility-First Fundamentals + +Building complex components from a constrained set of primitive utilities. + +## Overview + +Traditionally, whenever you need to style something on the web, you write CSS. + +Using a traditional approach where custom designs require custom CSS + +```html +
+
+ +
+
+

ChitChat

+

You have a new message!

+
+
+ + +With Tailwind, you style elements by applying pre-existing classes directly in +your HTML. Using utility classes to build custom designs without writing CSS +ChitChat You have a new message! + +
+
+ ChitChat Logo +
+
+
ChitChat
+

You have a new message!

+
+
+``` + +In the example above, we’ve used: + +1. Tailwind’s flexbox and padding utilities (flex, shrink-0, and p-6) to control the overall card layout +2. The max-width and margin utilities (max-w-sm and mx-auto) to constrain the card width and center it horizontally +3. The background color, border radius, and box-shadow utilities (bg-white, rounded-xl, and shadow-lg) to style the card’s appearance +4. The width and height utilities (w-12 and h-12) to size the logo image +5. The space-between utilities (space-x-4) to handle the spacing between the logo and the text +6. The font size, text color, and font-weight utilities (text-xl, text-black, font-medium, etc.) to style the card text +7. This approach allows us to implement a completely custom component design without writing a single line of custom CSS. + +Now I know what you’re thinking, “this is an atrocity, what a horrible mess!” and you’re right, it’s kind of ugly. In fact it’s just about impossible to think this is a good idea the first time you see it — you have to actually try it. + +But once you’ve actually built something this way, you’ll quickly notice some really important benefits: + +You aren’t wasting energy inventing class names. No more adding silly class names like sidebar-inner-wrapper just to be able to style something, and no more agonizing over the perfect abstract name for something that’s really just a flex container. + +Your CSS stops growing. Using a traditional approach, your CSS files get bigger every time you add a new feature. With utilities, everything is reusable so you rarely need to write new CSS. + +Making changes feels safer. CSS is global and you never know what you’re breaking when you make a change. Classes in your HTML are local, so you can change them without worrying about something else breaking. +When you realize how productive you can be working exclusively in HTML with predefined utility classes, working any other way will feel like torture. + +​ + +### Why not just use inline styles? + +A common reaction to this approach is wondering, “isn’t this just inline styles?” and in some ways it is — you’re applying styles directly to elements instead of assigning them a class name and then styling that class. + +But using utility classes has a few important advantages over inline styles: + +Designing with constraints. Using inline styles, every value is a magic number. With utilities, you’re choosing styles from a predefined design system, which makes it much easier to build visually consistent UIs. +Responsive design. You can’t use media queries in inline styles, but you can use Tailwind’s responsive utilities to build fully responsive interfaces easily. +Hover, focus, and other states. Inline styles can’t target states like hover or focus, but Tailwind’s state variants make it easy to style those states with utility classes. +This component is fully responsive and includes a button with hover and focus styles, and is built entirely with utility classes: + +```html +
+ Woman's Face +
+
+

Erin Lindford

+

Product Engineer

+
+ +
+
+``` + +​ + +### Maintainability concerns + +The biggest maintainability concern when using a utility-first approach is managing commonly repeated utility combinations. + +This is easily solved by extracting components and partials, and using editor and language features like multi-cursor editing and simple loops. + + + +```html + +``` + +Aside from that, maintaining a utility-first CSS project turns out to be a lot easier than maintaining a large CSS codebase, simply because HTML is so much easier to maintain than CSS. Large companies like GitHub, Netflix, Heroku, Kickstarter, Twitch, Segment, and more are using this approach with great success. + +If you’d like to hear about others’ experiences with this approach, check out the following resources: + +By The Numbers: A Year and a Half with Atomic CSS by John Polacek +No, Utility Classes Aren’t the Same As Inline Styles by Sarah Dayan of Algolia +Diana Mounter on using utility classes at GitHub, a podcast interview +For even more, check out The Case for Atomic/Utility-First CSS, curated by John Polacek. diff --git a/Programming Languages/Tailwind CSS/getting_started/Optimizing_for_production.md b/Programming Languages/Tailwind CSS/getting_started/Optimizing_for_production.md new file mode 100644 index 00000000..26dbb65a --- /dev/null +++ b/Programming Languages/Tailwind CSS/getting_started/Optimizing_for_production.md @@ -0,0 +1,54 @@ +--- +id: optimizing-for-production +title: optimizing-for-production +sidebar_label: optimizing-for-production +sidebar_position: 5 +tags: + - Tailwind CSS + - Getting Started + - Tailwind CSS Setup + - Tailwind CSS Installation + - Tailwind CSS Quickstart +description: This guide provides instructions on how to get started with Tailwind CSS, including installation and basic usage. +--- + +# Optimizing for Production + +## Introduction + +Tailwind CSS focuses on producing the smallest CSS file possible by generating only the CSS used in your project. This often results in CSS files under 10kB, even for large projects. For instance, Netflix's Top 10 site uses Tailwind and delivers just 6.5kB of CSS. + +## Steps to Optimize + +### Minify CSS + +Minifying your CSS can be done using tools like [cssnano](https://cssnano.co). If using Tailwind CLI, add the `--minify` flag: + +```bash +npx tailwindcss -o build.css --minify +``` + +## PostCSS Plugin + +If Tailwind is installed as a PostCSS plugin, add cssnano at the end of your plugin list: + +```javascript +// postcss.config.js +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + ...(process.env.NODE_ENV === "production" ? { cssnano: {} } : {}), + }, +}; +``` + +## Compression + +Compress your CSS using Brotli or similar tools. + +## Frameworks + +Many frameworks handle minification and compression automatically in production. + +For more details, visit the Tailwind CSS documentation. diff --git a/Programming Languages/Tailwind CSS/getting_started/Using_Tailwind_CSS_with_Preloaders.md b/Programming Languages/Tailwind CSS/getting_started/Using_Tailwind_CSS_with_Preloaders.md new file mode 100644 index 00000000..e43c55ba --- /dev/null +++ b/Programming Languages/Tailwind CSS/getting_started/Using_Tailwind_CSS_with_Preloaders.md @@ -0,0 +1,169 @@ +--- +id: using-with-preprocessors +title: using-with-preprocessors +sidebar_label: using-with-preprocessors +sidebar_position: 4 +tags: + - Tailwind CSS + - Getting Started + - Tailwind CSS Setup + - Tailwind CSS Installation + - Tailwind CSS Quickstart +description: This guide provides instructions on how to get started with Tailwind CSS, including installation and basic usage. +--- + +# Using Tailwind CSS with Preprocessors + +## Overview + +This guide provides instructions on how to integrate Tailwind CSS with common CSS preprocessors such as Sass, Less, and Stylus. Since Tailwind is a PostCSS plugin, it can be easily used with these preprocessors, though it is generally recommended to rely on PostCSS plugins for added functionality. + +## Using PostCSS as Your Preprocessor + +### Benefits + +- Faster builds due to fewer processing steps. +- Avoids quirks from mixing Tailwind with preprocessors. + +### Build-time Imports + +Use `postcss-import` for handling `@import` statements: + +```sh +npm install -D postcss-import +``` + +```javascript +// postcss.config.js +module.exports = { + plugins: { + "postcss-import": {}, + tailwindcss: {}, + autoprefixer: {}, + }, +}; +``` + +## Using Sass with Tailwind CSS + +### Installation + +Install the necessary dependencies: + +```sh +npm install -D tailwindcss postcss autoprefixer sass +``` + +### Configuration + +Create a `postcss.config.js` file: + +```javascript +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +}; +``` + +Update your build script to process Sass files: + +```sh +npx sass src/styles.scss src/styles.css +npx postcss src/styles.css -o dist/styles.css +``` + +### Example `styles.scss` + +```scss +@import "tailwindcss/base"; +@import "tailwindcss/components"; +@import "tailwindcss/utilities"; + +// Custom Sass code +``` + +## Using Less with Tailwind CSS + +### Installation + +Install the necessary dependencies: + +```sh +npm install -D tailwindcss postcss autoprefixer less +``` + +### Configuration + +Create a `postcss.config.js` file: + +```javascript +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +}; +``` + +Update your build script to process Less files: + +```sh +npx lessc src/styles.less src/styles.css +npx postcss src/styles.css -o dist/styles.css +``` + +### Example `styles.less` + +```less +@import "tailwindcss/base"; +@import "tailwindcss/components"; +@import "tailwindcss/utilities"; + +// Custom Less code +``` + +## Using Stylus with Tailwind CSS + +### Installation + +Install the necessary dependencies: + +```sh +npm install -D tailwindcss postcss autoprefixer stylus +``` + +### Configuration + +Create a `postcss.config.js` file: + +```javascript +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +}; +``` + +Update your build script to process Stylus files: + +```sh +npx stylus src/styles.styl -o src/styles.css +npx postcss src/styles.css -o dist/styles.css +``` + +### Example `styles.styl` + +```styl +@import 'tailwindcss/base' +@import 'tailwindcss/components' +@import 'tailwindcss/utilities' + +// Custom Stylus code +``` + +## Conclusion + +By following these instructions, you can seamlessly integrate Tailwind CSS with Sass, Less, or Stylus preprocessors in your project. While PostCSS is recommended for most use cases, these steps ensure flexibility for developers working with various preprocessing tools. diff --git a/Programming Languages/Tailwind CSS/getting_started/_category_.json b/Programming Languages/Tailwind CSS/getting_started/_category_.json new file mode 100644 index 00000000..94555dc1 --- /dev/null +++ b/Programming Languages/Tailwind CSS/getting_started/_category_.json @@ -0,0 +1,8 @@ +{ + "label": "Getting Started", + "position": 8, + "link": { + "type": "generated-index", + "description": "Tailwind CSS is a design system implementation in pure CSS. It is also configurable. It gives developers super powers. It allows them to build websites with a clean consistent UI out of the box." + } +} diff --git a/Programming Languages/Tailwind CSS/getting_started/browser_support.md b/Programming Languages/Tailwind CSS/getting_started/browser_support.md new file mode 100644 index 00000000..fa86f17c --- /dev/null +++ b/Programming Languages/Tailwind CSS/getting_started/browser_support.md @@ -0,0 +1,61 @@ +--- +id: browser-support +title: browser-support +sidebar_label: browser-support +sidebar_position: 6 +tags: + - Tailwind CSS + - Getting Started + - Tailwind CSS Setup + - Tailwind CSS Installation + - Tailwind CSS Quickstart +description: This guide provides instructions on how to get started with Tailwind CSS, including installation and basic usage. +--- + +## Browser Support + +Understanding which browsers Tailwind supports and how to manage vendor prefixes. + +In general, Tailwind CSS v3.0 is designed for and tested on the latest stable versions of Chrome, Firefox, Edge, and Safari. It does not support any version of IE, including IE 11. + +While most of the features in Tailwind CSS will work in all modern browsers, Tailwind also includes APIs for several bleeding-edge features that aren’t yet supported by all browsers, for example the :focus-visible pseudo-class and backdrop-filter utilities. + +Since Tailwind is such a low-level framework, it’s easy to avoid these features if you can’t use them by simply not using the utility or modifier that’s not supported, much like how you just wouldn’t use those CSS features in your CSS. + +The Can I Use database is a great resource when you’re unsure about the support for an unfamiliar CSS feature. + +​ + +## Vendor Prefixes + +Many CSS properties require vendor prefixes to be understood by browsers, for example background-clip: text needs the -webkit prefix to work in most browsers: + +``` +.bg-clip-text { + -webkit-background-clip: text; + background-clip: text; +} +``` + +If you’re using the Tailwind CLI tool, vendor prefixes like this will be added automatically. + +If not, we recommend that you use Autoprefixer, which is a PostCSS plugin that automatically adds any necessary vendor prefixes based on the browsers you tell it you need to support. + +To use it, install it via npm: + +``` +npm install -D autoprefixer +``` + +Then add it to the very end of your plugin list in your PostCSS configuration: + +``` +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + } +} +``` + +To learn more about specifying which browsers you need to support, check out Browserslist which is the standard way to define target browsers in front-end tooling. diff --git a/Programming Languages/Tailwind CSS/getting_started/tailwindcss_editor_setup.md b/Programming Languages/Tailwind CSS/getting_started/tailwindcss_editor_setup.md new file mode 100644 index 00000000..5548c186 --- /dev/null +++ b/Programming Languages/Tailwind CSS/getting_started/tailwindcss_editor_setup.md @@ -0,0 +1,60 @@ +--- +id: tailwindcss-editor-setup +title: tailwindcss-editor-setup +sidebar_label: tailwindcss-editor-setup +sidebar_position: 3 +tags: + - Tailwind CSS + - Getting Started + - Tailwind CSS Setup + - Tailwind CSS Installation + - Tailwind CSS Quickstart +description: This guide provides instructions on how to get started with Tailwind CSS, including installation and basic usage. +--- + +# Editor Setup - Tailwind CSS + +Plugins and configuration settings that can improve the developer experience when working with Tailwind CSS. + +## Syntax Support + +Tailwind CSS uses custom CSS at-rules like `@tailwind`, `@apply`, and `@config`, which may trigger warnings in some editors. Install a PostCSS language support plugin for your editor to avoid these issues. + +For VS Code, use the official [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) plugin, which includes: + +- Autocomplete +- Linting +- Hover Previews +- Syntax Highlighting + +## IntelliSense for VS Code + +Enhances the Tailwind development experience with features like autocomplete, syntax highlighting, and linting. + +Check out the project [on GitHub](https://github.com/tailwindlabs/tailwindcss-intellisense) or [add it to Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss). + +## Automatic Class Sorting with Prettier + +Use the [official Prettier plugin](https://github.com/tailwindlabs/prettier-plugin-tailwindcss) to automatically sort your classes following the recommended class order. + +```html + + + + + +``` + +## JetBrains IDEs + +JetBrains IDEs like WebStorm and PhpStorm include support for intelligent Tailwind CSS completions in HTML and `@apply`. + +[Learn more about Tailwind CSS support in JetBrains IDEs](https://www.jetbrains.com). + +For more detailed instructions, visit the [Tailwind CSS Editor Setup Guide](https://tailwindcss.com/docs/editor-setup). diff --git a/Programming Languages/Tailwind CSS/getting_started/tailwindcss_installation.md b/Programming Languages/Tailwind CSS/getting_started/tailwindcss_installation.md new file mode 100644 index 00000000..e746c376 --- /dev/null +++ b/Programming Languages/Tailwind CSS/getting_started/tailwindcss_installation.md @@ -0,0 +1,92 @@ +--- +id: getstart-tailwind +title: Getting Started with Tailwind CSS +sidebar_label: Getting Started +sidebar_position: 2 +tags: + - Tailwind CSS + - Getting Started + - Tailwind CSS Setup + - Tailwind CSS Installation + - Tailwind CSS Quickstart +description: This guide provides instructions on how to get started with Tailwind CSS, including installation and basic usage. +--- + +In this guide, we will walk through the steps required to get started with Tailwind CSS, from installation to basic usage. + +# Installation - Tailwind CSS + +Tailwind CSS is a utility-first CSS framework for rapidly building custom designs. Follow these steps to install Tailwind CSS using the Tailwind CLI tool. + +## Steps to Install Tailwind CSS + +### 1. Install Tailwind CSS + +Install `tailwindcss` via npm and create a configuration file. + +```bash +npm install -D tailwindcss +npx tailwindcss init +``` + +### 2. Configure Template Paths + +Add the paths to all your template files in `tailwind.config.js`. + +```js +/** @type {import('tailwindcss').Config} */ +module.exports = { + content: ["./src/**/*.{html,js}"], + theme: { + extend: {}, + }, + plugins: [], +}; +``` + +### 3. Add Tailwind Directives to CSS + +Include the `@tailwind` directives in your main CSS file. + +```css +@tailwind base; +@tailwind components; +@tailwind utilities; +``` + +### 4. Start the Tailwind CLI Build Process + +Run the CLI tool to scan your template files for classes and build your CSS. + +```bash +npx tailwindcss -i ./src/input.css -o ./src/output.css --watch +``` + +### 5. Use Tailwind in HTML + +Include the compiled CSS file in your HTML and start using Tailwind classes. + +```html + + + + + + + + +

Hello world!

+ + +``` + +## Additional Resources + +- [Utility-First Fundamentals](https://tailwindcss.com/docs/utility-first) +- [Responsive Design](https://tailwindcss.com/docs/responsive-design) +- [Hover, Focus & Other States](https://tailwindcss.com/docs/hover-focus-and-other-states) +- [Dark Mode](https://tailwindcss.com/docs/dark-mode) +- [Reusing Styles](https://tailwindcss.com/docs/reusing-styles) +- [Customizing the Framework](https://tailwindcss.com/docs/customizing-the-framework) + +For more detailed instructions, visit the [Tailwind CSS Installation Guide](https://tailwindcss.com/docs/installation). diff --git a/Programming Languages/Tailwind CSS/intro-tailwind.md b/Programming Languages/Tailwind CSS/intro-tailwind.md new file mode 100644 index 00000000..35caf7e9 --- /dev/null +++ b/Programming Languages/Tailwind CSS/intro-tailwind.md @@ -0,0 +1,44 @@ +--- +id: intro-tailwind +title: Introduction to Tailwind CSS +sidebar_label: Introduction to Tailwind CSS +sidebar_position: 1 +tags: + - Tailwind CSS + - Introduction to Tailwind CSS + - Tailwind CSS Basics + - Tailwind CSS Introduction + - Tailwind CSS Overview + - Tailwind CSS Tutorial + - Tailwind CSS Guide + - Tailwind CSS Getting Started + - Tailwind CSS Introduction Tutorial + - Tailwind CSS Introduction Guide + - Tailwind CSS Introduction Getting Started + - Tailwind CSS Introduction Overview + - Tailwind CSS Introduction Basics + - Tailwind CSS Introduction Basics Tutorial + - Tailwind CSS Introduction Basics Guide + - Tailwind CSS Introduction Basics Overview + - Tailwind CSS Introduction Basics Getting Started + - Tailwind CSS Introduction Basics Getting Started Tutorial + - Tailwind CSS Introduction Basics Getting Started Guide +description: Tailwind CSS is a utility-first CSS framework that allows developers to build custom designs quickly. This guide provides an introduction to Tailwind CSS. +--- + +In this tutorial, we will learn about Tailwind CSS, a utility-first CSS framework that allows developers to build custom designs quickly and efficiently. Tailwind CSS provides a set of predefined classes that can be composed to build any design directly in your HTML. + +## What is Tailwind CSS? + +Tailwind CSS is a highly customizable, low-level CSS framework that gives you all the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override. It is designed to be used directly in your HTML by applying utility classes to elements. + +## Why use Tailwind CSS? + +There are several reasons to use Tailwind CSS in your projects: + +1. **Utility-First**: Tailwind CSS provides a wide range of utility classes that allow you to apply styles directly in your HTML. This approach makes it easy to create custom designs without writing custom CSS. +2. **Customization**: Tailwind CSS is highly customizable. You can configure it to match your design system and create your own utility classes using the configuration file. +3. **Responsive Design**: Tailwind CSS makes it easy to create responsive designs using responsive utility variants. You can apply different styles at different breakpoints directly in your HTML. +4. **Consistency**: Using utility classes helps maintain consistency across your project. It ensures that the same styles are applied in the same way, reducing the risk of visual inconsistencies. +5. **Productivity**: Tailwind CSS can significantly speed up your development process by allowing you to build complex designs quickly. You can avoid context-switching between your HTML and CSS files and make changes directly in your HTML. +6. **Community and Ecosystem**: Tailwind CSS has a large and active community that provides support, plugins, and tools to enhance your development experience. diff --git a/Programming Languages/Tailwind CSS/margin/_category_.json b/Programming Languages/Tailwind CSS/margin/_category_.json new file mode 100644 index 00000000..1c27c4aa --- /dev/null +++ b/Programming Languages/Tailwind CSS/margin/_category_.json @@ -0,0 +1,9 @@ +{ + "label": "Margin", + "position": 8, + "link": { + "type": "generated-index", + "description": "Tailwind CSS is a design system implementation in pure CSS. It is also configurable. It gives developers super powers. It allows them to build websites with a clean consistent UI out of the box." + } + } + \ No newline at end of file diff --git a/Programming Languages/Tailwind CSS/margin/margin.md b/Programming Languages/Tailwind CSS/margin/margin.md new file mode 100644 index 00000000..c51f6235 --- /dev/null +++ b/Programming Languages/Tailwind CSS/margin/margin.md @@ -0,0 +1,56 @@ +--- +id: Margin +title: Margin +sidebar_label: Margin +sidebar_position: 8 +tags: + - Tailwind CSS + - Getting Started + - Tailwind CSS Setup + - Tailwind CSS Installation + - Tailwind CSS Quickstart +description: This guide provides instructions on how to get started with Tailwind CSS, including installation and basic usage. +--- + +# Margin in Tailwind CSS + +Margin is used to create space around an element. In Tailwind CSS, you can use utility classes to apply margin to your elements. +Using negative values +To use a negative margin value, prefix the class name with a dash to convert it to a negative value. + +``` +
-mt-8
+``` + +# Using logical properties + +Use the ms-_ and me-_ utilities to set the margin-inline-start and margin-inline-end logical properties, which map to either the left or right side based on the text direction. + +``` +
+
ms-8
+
me-8
+
+``` + +​ + +# Hover, focus, and other states + +Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:mt-8 to only apply the mt-8 utility on hover. + +``` +
+ +
+``` + +# Breakpoints and media queries + +You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:mt-8 to apply the mt-8 utility at only medium screen sizes and above. + +``` +
+ +
+``` diff --git a/Programming Languages/Tailwind CSS/padding/_.category_.json b/Programming Languages/Tailwind CSS/padding/_.category_.json new file mode 100644 index 00000000..891b0f48 --- /dev/null +++ b/Programming Languages/Tailwind CSS/padding/_.category_.json @@ -0,0 +1,8 @@ +{ + "label": "Padding", + "position": 9, + "link": { + "type": "generated-index", + "description": "Tailwind CSS is a design system implementation in pure CSS. It is also configurable. It gives developers super powers. It allows them to build websites with a clean consistent UI out of the box." + } +} diff --git a/Programming Languages/Tailwind CSS/padding/padding.md b/Programming Languages/Tailwind CSS/padding/padding.md new file mode 100644 index 00000000..c69d16ab --- /dev/null +++ b/Programming Languages/Tailwind CSS/padding/padding.md @@ -0,0 +1,72 @@ +--- +id: padding +title: padding +sidebar_label: Padding +sidebar_position: 7 +tags: + - Tailwind CSS + - Getting Started + - Tailwind CSS Setup + - Tailwind CSS Installation + - Tailwind CSS Quickstart +description: This guide provides instructions on how to get started with Tailwind CSS, including installation and basic usage. +--- + +# Basic usage + +​ + +# Add padding to a single side + +Use the pt-_, pr-_, pb-_, and pl-_ utilities to control the padding on one side of an element. + +For example, pt-6 would add 1.5rem of padding to the top of an element, pr-4 would add 1rem of padding to the right of an element, pb-8 would add 2rem of padding to the bottom of an element, and pl-2 would add 0.5rem of padding to the left of an element. + +``` +
pt-6
+
pr-4
+
pb-8
+
pl-2
+ + + +``` + +# Add horizontal padding + +Use the px-\* utilities to control the horizontal padding of an element. + +``` +
px-8
+ +``` + +# Add vertical padding + +Use the py-\* utilities to control the vertical padding of an element. + +``` +
py-8
+ +``` + +# Add padding to all sides + +Use the p-\* utilities to control the padding on all sides of an element. + +`
p-8
` + +# Using logical properties + +Use the ps-_ and pe-_ utilities to set the padding-inline-start and padding-inline-end logical properties, which map to either the left or right side based on the text direction. + +````
+
ps-8
+
pe-8
+
+ +
+
ps-8
+
pe-8
+
``` +```` diff --git a/Programming Languages/tailwind CSS/README.md b/Programming Languages/tailwind CSS/README.md deleted file mode 100644 index fd6d7fe8..00000000 --- a/Programming Languages/tailwind CSS/README.md +++ /dev/null @@ -1,498 +0,0 @@ -## Tailwind CSS -Tailwind CSS is a highly customizable, low-level CSS framework that provides all the building blocks needed to build custom designs without any annoying opinionated styles you have to fight to override. - -## Table of Contents - -- [Roadmap](#roadmap)
-- [Tailwind](#elixir)
- - [Introduction](#introduction)
- - [Fundamentals](#fundamentals)
- - [Functions](#functions)
- - [Arrays, Slices and Maps](#arrays-slices-and-maps)
- - [Structs and Methods](#structs-and-methods)
- - [Concurrency](#concurrency)
- - [Packages and Modules](#packages-and-modules)
- - [Error Handling](#error-handling)
- - [File I/O and Networking](#file-io-and-networking)
- - [Testing](#testing)
- - [Web Development](#web-development)
-- [Tools](#tools)
-- [Projects](#projects)
- - [Beginner Projects](#beginner-projects) - - [Intermediate Projects](#intermediate-projects) - - [Advanced Projects](#advanced-projects) -- [Courses](#courses) - - [Free Courses](#free-courses) - - [Paid Courses](#paid-courses) -- [Youtube](#youtube) - - [Youtube Channels](#youtube-channels) - - [Youtube Playlists](#youtube-playlists) -- [Additional Resources](#additional-resources) - - [Books](#books) - - [Free Books](#free-books) - - [Paid Books](#paid-books) - - [Communities](#communities) - - [Documentation](#documentation) -- [Conclusion](#conclusion) - -Roadmap -The Tailwind CSS roadmap outlines the essential steps and skills needed to become proficient in using Tailwind CSS for designing responsive and maintainable user interfaces. - - - - - - - - - - - - - - -
Resource NameDescription
Tailwind CSS DocumentationOfficial guide to installing and setting up Tailwind CSS.
Tailwind CSS: A Practical GuideAn in-depth guide to getting started with Tailwind CSS.
-Tailwind CSS -Offers step-by-step guides and tutorials covering various aspects of Tailwind CSS. -Helps beginners understand fundamental concepts and advanced users explore new techniques. - - -## Introduction - - - - - - - - - - - - - - - - - - - - - -
Resource NameDescription
OverviewTailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces.
DocumentationOfficial Tailwind CSS documentation covering all aspects of the framework.
SetupGuide to installing Tailwind CSS in your project.
Utility-FirstLearn about the utility-first approach in Tailwind CSS.
- -## Fundamentals - - - - - - - - - - - - - - - - - - - - - -
Resource NameDescription
Utility ClassesUnderstand how to use utility classes in Tailwind CSS.
ThemingLearn how to customize the theme of your Tailwind CSS project.
Functions and DirectivesExplore the functions and directives provided by Tailwind CSS.
Controlling File SizeLearn techniques to control the file size of your Tailwind CSS build.
- -## Customization - - - - - - - - - - - - - - - - - -
Resource NameDescription
Customizing ColorsGuide to customizing the color palette in Tailwind CSS.
ConfigurationLearn how to configure Tailwind CSS to fit your project's needs.
PresetsUnderstand how to use and create presets in Tailwind CSS.
- -## Responsive Design - - - - - - - - - - - - - -
Resource NameDescription
Responsive DesignLearn how to implement responsive design with Tailwind CSS.
BreakpointsUnderstand the breakpoints available in Tailwind CSS.
- -## State Variants - - - - - - - - - - - - - -
Resource NameDescription
Hover, Focus, and Other StatesLearn how to style elements based on different states.
State VariantsUnderstand how to use state variants in Tailwind CSS.
- -## Plugins - - - - - - - - - - - - - -
Resource NameDescription
PluginsGuide to using and creating plugins in Tailwind CSS.
Awesome Tailwind CSS PluginsA curated list of awesome Tailwind CSS plugins.
- -## Integration - - - - - - - - - - - - - - - - - -
Resource NameDescription
Tailwind CSS with Vue.jsLearn how to integrate Tailwind CSS with Vue.js.
Tailwind CSS with ReactGuide to using Tailwind CSS with React.
Tailwind CSS with AngularUnderstand how to use Tailwind CSS with Angular.
- -## Best Practices - - - - - - - - - - - - - -
Resource NameDescription
Optimizing for ProductionLearn how to optimize your Tailwind CSS build for production.
Reusing StylesBest practices for reusing styles in Tailwind CSS.
- -## Error Handling - - - - - - - - - - - - - -
Resource NameDescription
Troubleshooting InstallationCommon issues and solutions for installing Tailwind CSS.
GitHub IssuesCheck and report issues on the Tailwind CSS GitHub repository.
- -## Testing - - - - - - - - - - - - - -
Resource NameDescription
Using PurgeCSSGuide to using PurgeCSS with Tailwind CSS to remove unused styles.
Testing Tailwind CSSBest practices for testing Tailwind CSS in your projects.
- -## Web Development -Web development with Tailwind CSS. - - - - - - - - - - - - - - - - - - -
Resource NameDescription
Setup ExamplesExamples of different setups for using Tailwind CSS in web development projects.
Tailwind ComponentsA collection of community-contributed Tailwind CSS components and templates.
LayoutsGuide to building responsive layouts with Tailwind CSS.
- -## Tools -Explore various tools that enhance the development experience with Tailwind CSS. - - - - - - - - - - - - - - - - - - -
ToolDescription
Tailwind CSS IntelliSenseVSCode plugin for Tailwind CSS IntelliSense.
Tailwind PlayAn online playground for trying out Tailwind CSS.
Tailwind ToolboxCollection of templates and components built with Tailwind CSS.
- -## Projects -Beginner Projects - - - - - - - - - - - - - -
ProjectDescription
Personal PortfolioBuild a simple personal portfolio using Tailwind CSS.
Responsive Navigation BarCreate a responsive navigation bar with Tailwind CSS.
-Intermediate Projects - - - - - - - - - - - - - -
ProjectDescription
E-commerce Product PageBuild an e-commerce product page using Tailwind CSS.
Dashboard InterfaceCreate a dashboard interface with Tailwind CSS.
-Advanced Projects - - - - - - - - - - - - - -
ProjectDescription
Full-fledged Web ApplicationDevelop a full-fledged web application using Tailwind CSS.
Admin Dashboard TemplateCreate an advanced admin dashboard template with Tailwind CSS.
- -## Courses - -## Free Courses - - - - - - - - - - - - - -
CourseDescription
Tailwind CSS Crash CourseFree crash course on Tailwind CSS by Traversy Media.
Scrimba Tailwind CSS CourseInteractive Tailwind CSS course on Scrimba.
- -## Paid Courses - - - - - - - - - - - - - -
CourseDescription
Tailwind CSS from ScratchComprehensive Tailwind CSS course on Udemy.
Design Systems with Tailwind CSSAdvanced Tailwind CSS course on Frontend Masters.
- -## YouTube - -## YouTube Channels - - - - - - - - - - - - - -
ChannelDescription
Traversy MediaPopular web development channel with Tailwind CSS tutorials.
Tailwind LabsOfficial YouTube channel for Tailwind CSS.
- -## YouTube Playlists - - - - - - - - - - - - - -
PlaylistDescription
Tailwind CSS PlaylistCollection of Tailwind CSS tutorials and guides.
Advanced Tailwind CSSAdvanced Tailwind CSS techniques and practices.
- -## Additional Resources -Books - -## Free Books - - - - - - - - - - - - - -
BookDescription
Tailwind CSS DocumentationComprehensive guide to Tailwind CSS by the creators.
Tailwind CSS: A Practical GuidePractical guide to using Tailwind CSS in real-world projects.
- -## Paid Books - - - - - - - - - - - - - -
BookDescription
Tailwind CSS in ActionIn-depth guide to Tailwind CSS by the Pragmatic Programmers.
The Book of Tailwind CSSComprehensive book on Tailwind CSS by Ahmed Bouzid.
- -## Websites - - - - - - - - - - - - - -
WebsiteDescription
Official Tailwind CSS WebsiteOfficial website for Tailwind CSS with documentation and resources.
Tailwind UIOfficial Tailwind UI component library.
- -## Blogs - - - - - - - - - - - - - -
BlogDescription
Tailwind CSS BlogOfficial blog with updates and articles on Tailwind CSS.
Dev.to Tailwind CSS TagCommunity posts and tutorials on Tailwind CSS.
- -## Conclusion -Whether you're just starting with Tailwind CSS or looking to deepen your knowledge, these resources will guide you through every step of the process. From official documentation and courses to community projects and blogs, there's a wealth of information available to help you master Tailwind CSS and enhance your web development projects. - -