Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Legacy docs - local installation guide #1789

Merged
merged 3 commits into from
Jul 18, 2023
Merged

Legacy docs - local installation guide #1789

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ad79e85
Legacy docs - local installation guide
iprzybysz Jul 14, 2023
83bdf9d
Add info about hugo installation
iprzybysz Jul 18, 2023
36e6a68
Add local installation page to search
juujisai Jul 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions site/content/docs/standard/getting-started/local-installation/index-ss.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
---
---

<li class="mb-1 pl-[9px] text-[0.85rem]" data-te-spy-active>
<a href="#intruduction">Introduction</a>
</li>
<li class="mb-1 pl-[9px] text-[0.85rem]"><a href="#step1">Step 1</a></li>
<li class="mb-1 pl-[9px] text-[0.85rem]"><a href="#step2">Step 2</a></li>
<li class="mb-1 pl-[9px] text-[0.85rem]"><a href="#step3">Step 3</a></li>
268 changes: 268 additions & 0 deletions site/content/docs/standard/getting-started/local-installation/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,268 @@
---
title: "Quick Start"
date: 2023-03-07T16:00:58+02:00
draft: false
main_title: "Local installation"
subheading: ""
seo_title: "Complete Local Installation Guide for Tailwind Elements: Step-by-Step Setup Instructions"
description: "Complete local installation guide for Tailwind Elements: Step-by-step setup instructions."
image: "https://tecdn.b-cdn.net/img/components-big.jpg"
video: "https://www.youtube.com/watch?v=-GmnyjgI4Jc&ab_channel=Keepcoding"
url: "docs/standard/getting-started/local-installation/"
menu:
gettingstarted:
name: "Local installation"
weight: 2
---

<div class="flex flex-row">
<!-- <div class="basis-7/12"> -->
<div class="w-full">
<h2
class="mb-5 mt-0 text-2xl font-semibold leading-normal"
id="introduction"
data-te-spy-item>
Introduction
</h2>
<p class="mb-2">
Tailwind Elements is a comprehensive library of pre-designed components
and UI elements built on top of the Tailwind CSS framework. This local
installation guide will walk you through the steps required to set up and
use Tailwind Elements in your development environment. By following these
instructions, you'll be able to leverage the power of Tailwind Elements to
enhance your web development projects.
</p>

<div
class="mt-5 rounded-md border-l-[6px] border-solid border-gray-400 bg-gray-100 p-4 dark:border-gray-300 dark:bg-gray-300/30 ">
<strong>Note:</strong> If you need more comprehensive support, we
recommend you our tutorials, which will introduce you step by step to our
library, its entire environment and Tailwind CSS itself.

<div class="mt-3">
<a
href="/learn/te-foundations/basics/introduction/"
class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]">
Start learning
</a>
</div>
</div>
</div>
</div>

<hr class="my-10" />

<div class="w-full">
<h2
class="mb-5 mt-0 text-2xl font-semibold leading-normal"
id="step1"
data-te-spy-item>
Step 1: Clone the repository
</h2>
<div
class="my-5 rounded-md border-l-[6px] border-solid border-primary-400 bg-primary-100 p-4 dark:border-primary-300 dark:bg-primary-300/30 ">
<strong>Note:</strong> Make sure that that you have
<a
href="https://git-scm.com/"
target="_blank"
class="text-primary-700 dark:text-primary-400"
>Git</a
>
installed on your machine, as it is required to clone repositories.
</div>
<p class="mb-2">
To clone the Tailwind Elements repository from GitHub, follow these steps:
</p>
<p class="mb-2">
1. Go to the
<a
href="https://github.com/mdbootstrap/Tailwind-Elements"
target="_blank"
class="text-primary-700 dark:text-primary-400"
>Tailwind Elements repository</a
>
on GitHub.
</p>
<p class="mb-2">
2. Click on the "Code" button, located above the file list on the
repository's main page.
</p>
<p class="mb-2">
3. In the dropdown that appears, click on the clipboard icon to copy the
repository's clone URL.
</p>
<p class="mb-2">
4. Open your preferred command line interface (CLI) or terminal.
</p>
<p class="mb-2">
5. Navigate to the directory where you want to clone the repository using
the <code>cd</code> command:
</p>
<div class="pt-2">
{{< twsnippet/wrapper "terminal" "" "mobile" >}}
{{< twsnippet/code active=true lang="Plaintext" type="terminal" >}}
cd /path/to/directory
{{< /twsnippet/code >}}
{{< /twsnippet/wrapper >}}
</div>
<p class="mb-2">
6. In the terminal, paste the previously copied clone URL and run the
following command to clone the repository:
</p>
<div class="pt-2">
{{< twsnippet/wrapper "terminal" "" "mobile" >}}
{{< twsnippet/code active=true lang="Plaintext" type="terminal" >}}
git clone https://github.com/mdbootstrap/Tailwind-Elements.git
{{< /twsnippet/code >}}
{{< /twsnippet/wrapper >}}
</div>
<p class="mb-2">
7. Once the cloning process is complete, navigate into the cloned
repository's directory.
</p>
<p class="mb-2">
8. If you are searching for specific versions of Tailwind Elements, you can
use the following command to list all available tags:
</p>
<div class="pt-2">
{{< twsnippet/wrapper "terminal" "" "mobile" >}}
{{< twsnippet/code active=true lang="Plaintext" type="terminal" >}}
git tag -l
{{< /twsnippet/code >}}
{{< /twsnippet/wrapper >}}
</div>
<p class="mb-2">
9. Then you can checkout the desired version (e.g.
<code>v1.0.0-beta1</code>) using the following command:
</p>
<div class="pt-2">
{{< twsnippet/wrapper "terminal" "" "mobile" >}}
{{< twsnippet/code active=true lang="Plaintext" type="terminal" >}}
git checkout v1.0.0-beta1
{{< /twsnippet/code >}}
{{< /twsnippet/wrapper >}}
</div>
</div>

<div class="w-full">
<h2
class="mb-5 mt-0 text-2xl font-semibold leading-normal"
id="step2"
data-te-spy-item>
Step 2: Install dependencies
</h2>
<div
class="my-5 rounded-md border-l-[6px] border-solid border-primary-400 bg-primary-100 p-4 dark:border-primary-300 dark:bg-primary-300/30 ">
<strong>Note:</strong> Make sure that that you have
<a
href="https://nodejs.org/en"
target="_blank"
class="text-primary-700 dark:text-primary-400"
>Node.js (LTS)</a
>
installed on your machine.
</div>
<p class="mb-2">To install all necessary dependencies, follow these steps:</p>
<p class="mb-2">
1. Open your preferred command line interface (CLI) or terminal.
</p>
<p class="mb-2">
2. Navigate to the root directory of your project using the
<code>cd</code> command:
</p>
<div class="pt-2">
{{< twsnippet/wrapper "terminal" "" "mobile" >}}
{{< twsnippet/code active=true lang="Plaintext" type="terminal" >}}
cd /path/to/project
{{< /twsnippet/code >}}
{{< /twsnippet/wrapper >}}
</div>
<p class="mb-2">3. Run the following command to install all dependencies:</p>
<div class="pt-2">
{{< twsnippet/wrapper "terminal" "" "mobile" >}}
{{< twsnippet/code active=true lang="Plaintext" type="terminal" >}}
npm install
{{< /twsnippet/code >}}
{{< /twsnippet/wrapper >}}
</div>
<p class="mb-2">
This command will read the <code>package.json</code> file and download all
the necessary dependencies into a <code>node_modules</code> folder.
</p>
<p class="mb-2">
4. In addition to installing the project dependencies, you may also need to
install the dependencies required for the documentation. To ensure it run
the following command:
</p>
<div class="pt-2">
{{< twsnippet/wrapper "terminal" "" "mobile" >}}
{{< twsnippet/code active=true lang="Plaintext" type="terminal" >}}
npm run docs:install
{{< /twsnippet/code >}}
{{< /twsnippet/wrapper >}}
</div>
<div
class="my-5 rounded-md border-l-[6px] border-solid border-primary-400 bg-primary-100 p-4 dark:border-primary-300 dark:bg-primary-300/30 ">
<strong>Note:</strong> Ensure that
<a
href="https://gohugo.io/installation/"
target="_blank"
class="text-primary-700 dark:text-primary-400"
>Hugo</a
>
is installed on your device as it is a prerequisite for accessing our
documentation.
</div>
</div>

<div class="w-full">
<h2
class="mb-5 mt-0 text-2xl font-semibold leading-normal"
id="step3"
data-te-spy-item>
Step 3: Running the Demo App and Documentation
</h2>
<p class="">
Once you have successfully installed the dependencies for your project, you
can proceed with utilizing them in your development workflow.
</p>
<div
class="my-5 rounded-md border-l-[6px] border-solid border-primary-400 bg-primary-100 p-4 dark:border-primary-300 dark:bg-primary-300/30 ">
<strong>Note:</strong> Before attempting to start a specific version of
Tailwind Elements, it is crucial to ensure that you have followed all the
instructions outlined in
<a
href="#step1"
target="_blank"
class="text-primary-700 dark:text-primary-400"
>Step 1</a
>.
</div>
<p class="mb-2">
1. To start the demo application, run the following command in your
terminal:
</p>
<div class="pt-2">
{{< twsnippet/wrapper "terminal" "" "mobile" >}}
{{< twsnippet/code active=true lang="Plaintext" type="terminal" >}}
npm start
{{< /twsnippet/code >}}
{{< /twsnippet/wrapper >}}
</div>
<p class="mb-2">
2. Launch the documentation by executing the following command:
</p>
<div class="pt-2">
{{< twsnippet/wrapper "terminal" "" "mobile" >}}
{{< twsnippet/code active=true lang="Plaintext" type="terminal" >}}
npm run docs:start
{{< /twsnippet/code >}}
{{< /twsnippet/wrapper >}}
</div>
<div
class="my-5 rounded-md border-l-[6px] border-solid border-primary-400 bg-primary-100 p-4 dark:border-primary-300 dark:bg-primary-300/30 ">
<strong>Note:</strong> Prior to running the documentation, it is important
to execute the command <code>npm run build</code> to compile the Tailwind
plugin and update the files located in the <code>/site</code> directory.
</div>
</div>
6 changes: 6 additions & 0 deletions site/static/search.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,12 @@
"keywords": ["start", "tutorial"],
"category": "Getting started"
},
{
"href": "/docs/standard/getting-started/local-installation/",
"name": "Local installation",
"keywords": ["local", "installation", "documentation", "hugo"],
"category": "Getting started"
},
{
"href": "/docs/standard/getting-started/theming/",
"name": "Theming",
Expand Down