diff --git a/docs/tailwind/_category_.json b/docs/tailwind/_category_.json new file mode 100644 index 000000000..bfc83b24c --- /dev/null +++ b/docs/tailwind/_category_.json @@ -0,0 +1,8 @@ +{ + "label": "Tailwind", + "position": 8, + "link": { + "type": "generated-index", + "description": "TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. It is developed and maintained by Microsoft." + } +} diff --git a/docs/tailwind/getstart.md b/docs/tailwind/getstart.md new file mode 100644 index 000000000..f5b25e503 --- /dev/null +++ b/docs/tailwind/getstart.md @@ -0,0 +1,79 @@ +--- +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 + +### Using npm + +The recommended way to install Tailwind CSS is via npm. If you don't have npm installed, you can download and install it from [npm's official website](https://www.npmjs.com/). + +1. Initialize your project: + + ```bash + npm init -y + + ``` + +2. Install Tailwind CSS via npm: + +```bash +npm install tailwindcss +``` + +3. Generate a configuration file: + +```bash +npx tailwindcss init +``` + +### Using CDN + +If you prefer not to use npm, you can include Tailwind CSS directly from a CDN. Add the following ` ` tag to the ` ` of your HTML file: + +```bash + + + + + + Tailwind CSS Card + + +
+
+
+ An example image +
+
+
Card title
+

This is an example of a card using Tailwind CSS. You can replace this text with your own.

+
+
+
+ + +``` diff --git a/docs/tailwind/intro-tailwind.md b/docs/tailwind/intro-tailwind.md new file mode 100644 index 000000000..35caf7e9f --- /dev/null +++ b/docs/tailwind/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/docusaurus.config.js b/docusaurus.config.js index 1eb12dbee..1146365a4 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -74,7 +74,8 @@ const config = { image: "img/nav-logo.jpg", announcementBar: { id: "announcementBar", - content: '⭐️ If you like CodeHarborHub, give it a star on GitHub and join us on LinkedIn ⭐️', + content: + '⭐️ If you like CodeHarborHub, give it a star on GitHub and join us on LinkedIn ⭐️', isCloseable: true, backgroundColor: "var(--ifm-color-primary)", }, @@ -110,6 +111,7 @@ const config = { TypeScript Python Java + Tailwind `, }, @@ -152,7 +154,7 @@ const config = { Problems
Solutions - `, + `, }, ], }, @@ -540,7 +542,7 @@ const config = { showLastUpdateAuthor: true, showLastUpdateTime: true, }, - ], + ], [ path.join(__dirname, "/plugins/my-plugin"), { @@ -552,4 +554,4 @@ const config = { ], }; -export default config; \ No newline at end of file +export default config; diff --git a/static/icons/tailwind.png b/static/icons/tailwind.png new file mode 100644 index 000000000..216af6c50 Binary files /dev/null and b/static/icons/tailwind.png differ