diff --git a/site/content/docs/standard/integrations/angular/index-ss.html b/site/content/docs/standard/integrations/angular/index-ss.html
new file mode 100644
index 000000000..4513dc8b0
--- /dev/null
+++ b/site/content/docs/standard/integrations/angular/index-ss.html
@@ -0,0 +1,17 @@
+---
+---
+
+
+ Prerequisites
+
+
+ Creating a new Angular application
+
+
+ Installing and configuring Tailwind CSS and Tailwind Elements
+
+
+ Initializing via JS
+
diff --git a/site/content/docs/standard/integrations/angular/index.html b/site/content/docs/standard/integrations/angular/index.html
new file mode 100644
index 000000000..08a68fed1
--- /dev/null
+++ b/site/content/docs/standard/integrations/angular/index.html
@@ -0,0 +1,292 @@
+---
+title: "Angular integration"
+date: 2021-04-29T16:00:58+02:00
+draft: false
+main_title: "Tailwind Elements Angular integration"
+subheading: ""
+seo_title: "Tailwind Elements integration with Angular - Free Examples & Tutorial"
+description: "This article shows you how to integrate Angular application with Tailwind Elements. Free download, AGPL license."
+image: "img/components-big.jpg"
+url: "docs/standard/integrations/angular-integration/"
+menu:
+ integrations:
+ name: "Angular"
+---
+
+
+
+
+
+
+ Prerequisites
+
+
+
+
+ Before starting the project make sure to install the following utilities:
+
+
+
+
+ Node LTS
+ (14.x.x or higher recommended)
+
+
+ Angular
+ (14.x.x or higher recommended)
+
+
+ Code editor. We recommend
+ VSCode
+
+
+
+
+
+ Angular Tailwind Elements:
+ waiting list availabable here .
+
+
+
+
+
+
+ Creating a new Angular application
+
+
+
+
+ Let's create a fresh Angular application so that we can go through all the
+ steps together.
+
+
+ Step 1
+ Install Angular CLI
+
+
+ {{< twsnippet/wrapper "terminal" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="plaintext" type="terminal" >}}
+ npm install -g @angular/cli
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+ Step 2
+ Create new project
+
+
+
+ {{< twsnippet/wrapper "terminal" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="plaintext" type="terminal" >}}
+ ng new my-project
+ cd my-project
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+
+
+
+
+ Installing and configuring Tailwind CSS and Tailwind Elements
+
+
+
+ Step 1
+ Install Tailwind CSS
+
+
+
+ {{< twsnippet/wrapper "terminal" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="plaintext" type="terminal" >}}
+ npm install -D tailwindcss postcss autoprefixer
+ npx tailwindcss init
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+ Step 2
+
+ Add the paths to all of your template files in your
+ tailwind.config.cjs file.
+
+
+
+
+ {{< twsnippet/wrapper "tailwind.config.cjs" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="JavaScript" >}}
+ /** @type {import('tailwindcss').Config} */
+ module.exports = {
+ content: [
+ "./src/**/*.{html,ts}",
+ "./node_modules/tw-elements/dist/js/**/*.js"
+ ],
+ theme: {
+ extend: {},
+ },
+ plugins: [require("tw-elements/dist/plugin")]
+ }
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+ Step 3
+
+ Add the @tailwind directives for each of Tailwind’s layers to
+ your ./src/styles.css file.
+
+
+
+
+ {{< twsnippet/wrapper "styles.css" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="CSS" >}}
+ @tailwind base;
+ @tailwind components;
+ @tailwind utilities;
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+ Step 4
+ Install Tailwind Elements.
+
+
+
+ {{< twsnippet/wrapper "terminal" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="plaintext" type="terminal" >}}
+ npm install tw-elements
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+
+ Step 5
+
+ In root directory add typings.d.ts file and put in there
+ Tailwind Elements module's declarataion.
+
+
+
+
+ {{< twsnippet/wrapper "typings.d.ts" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="JavaScript" >}}
+ declare module 'tw-elements';
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+ Step 6
+
+ In app.component.ts file (located in
+ src/app/ directory) put lifecycle method where are you going to
+ dynamically importing library.
+
+
+
+
+ {{< twsnippet/wrapper "app.component.ts" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="JavaScript" >}}
+ ngOnInit() {
+ const importTE = async () => {
+ await import('tw-elements');
+ };
+ importTE();
+ }
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+
+
+
+
+
+
+ Initializing via JS
+
+
+
+
+ By default all components have autoinit which means they are initialized by
+ data attributes. But if you want to make init by JavaScript - there is also
+ possibility to do that.
+
+
+ Step 1
+ Import library.
+
+
+
+ {{< twsnippet/wrapper "app.component.ts" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="JavaScript" >}}
+ import * as te from "tw-elements";
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+ Step 2
+ Initialize component in lifecycle hook.
+
+
+
+ {{< twsnippet/wrapper "app.component.ts" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="JavaScript" >}}
+ ngOnInit() {
+ const options = {
+ format: "dd-mm-yyyy",
+ };
+ const myDatepicker = new te.Datepicker(
+ document.getElementById("myDatepicker"),
+ options
+ );
+ };
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+
diff --git a/site/content/docs/standard/integrations/django/index-ss.html b/site/content/docs/standard/integrations/django/index-ss.html
new file mode 100644
index 000000000..288b400f5
--- /dev/null
+++ b/site/content/docs/standard/integrations/django/index-ss.html
@@ -0,0 +1,14 @@
+---
+---
+
+
+ Prerequisites
+
+
+ Creating a new Django application
+
+
+ Installing and configuring Tailwind CSS and Tailwind Elements
+
diff --git a/site/content/docs/standard/integrations/django/index.html b/site/content/docs/standard/integrations/django/index.html
new file mode 100644
index 000000000..5e12b0eec
--- /dev/null
+++ b/site/content/docs/standard/integrations/django/index.html
@@ -0,0 +1,358 @@
+---
+title: "Django integration"
+date: 2021-04-29T16:00:58+02:00
+draft: false
+main_title: "Tailwind Elements Django integration"
+subheading: ""
+seo_title: "Tailwind Elements integration with Django - Free Examples & Tutorial"
+description: "This article shows you how to integrate Django application with Tailwind Elements. Free download, AGPL license."
+image: "img/components-big.jpg"
+url: "docs/standard/integrations/django-integration/"
+menu:
+ integrations:
+ name: "Django"
+---
+
+
+
+
+
+ Prerequisites
+
+
+
+
+ Before starting the project make sure to install the following utilities:
+
+
+
+
+ Node LTS
+ (14.x.x or higher recommended)
+
+
+ Python
+
+
+ pip
+ package manager
+
+
+ Code editor. We recommend
+ VSCode
+
+
+
+
+
+
+
+
+ Creating a new Django application
+
+
+
+
+ Let's create a fresh Django application so that we can go through all the
+ steps together.
+
+
+ Step 1
+ Add Python virtual environment.
+
+
+
+ {{< twsnippet/wrapper "Terminal - Windows, Terminal - MacOS/Linux" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="plaintext" type="terminal" >}}
+ mkdir my-project
+ cd my-project
+ py -3 -m venv venv
+ {{< /twsnippet/code >}}
+ {{< twsnippet/code lang="plaintext" type="terminal" >}}
+ mkdir my-project
+ cd my-project
+ python -3 -m venv venv
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+ Step 2
+
+ Now activate created environment. In case that you are working on Windows
+ and command is not working, try this:
+ source ./venv/Scripts/activate. After this you should see venv
+ catalogue and in your terminal will be visible (venv) badge.
+
+
+
+
+ {{< twsnippet/wrapper "Terminal - Windows, Terminal - MacOS/Linux" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="plaintext" type="terminal" >}}
+ venv/Scripts/activate
+ {{< /twsnippet/code >}}
+ {{< twsnippet/code lang="plaintext" type="terminal" >}}
+ . venv/bin/activate
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+ Step 3
+ Install Django.
+
+
+
+ {{< twsnippet/wrapper "Terminal" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="plaintext" type="terminal" >}}
+ pip install django
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+ Step 4
+ Create a project.
+
+
+
+ {{< twsnippet/wrapper "Terminal" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="plaintext" type="terminal" >}}
+ django-admin startproject mysite
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+ Step 5
+
+ Go to settings.py file in mysite folder and modify
+ section with paths for static files.
+
+
+
+
+ {{< twsnippet/wrapper "settings.py" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="python" >}}
+ TE_URL = 'node_modules/'
+ STATICFILES_DIRS = [
+ BASE_DIR / "static",
+ BASE_DIR.parent / "node_modules",
+ ]
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+
+
+
+
+
+ Installing and configuring Tailwind CSS and Tailwind Elements
+
+
+
+ Step 1
+ Install Tailwind CSS
+
+
+
+ {{< twsnippet/wrapper "Terminal" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="plaintext" type="terminal" >}}
+ npm install -D tailwindcss postcss autoprefixer
+ npx tailwindcss init -p
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+ Step 2
+
+ Add the paths to all of your template files in your
+ tailwind.config.js file.
+
+
+
+
+ {{< twsnippet/wrapper "tailwind.config.js" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="JavaScript" >}}
+ /** @type {import('tailwindcss').Config} */
+ module.exports = {
+ content: [
+ "./src/**/*.{html,js}",
+ "./node_modules/tw-elements/dist/js/**/*.js",
+ ],
+ theme: {
+ extend: {},
+ },
+ darkMode: "class",
+ plugins: [require("tw-elements/dist/plugin")],
+ };
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+ Step 3
+
+ Create an static folder in root directory and
+ input.css file. Then add the @tailwind directives
+ for each of Tailwind’s layers.
+
+
+
+
+ {{< twsnippet/wrapper "input.css" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="CSS" >}}
+ @tailwind base;
+ @tailwind components;
+ @tailwind utilities;
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+ Step 4
+
+ Start the Tailwind CLI build process. Run the CLI tool to scan your template
+ files for classes and build your CSS.
+
+
+
+
+ {{< twsnippet/wrapper "Terminal" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="plaintext" type="terminal" >}}
+ npx tailwindcss -i input.css -o static/output.css --watch
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+ Step 5
+
+ In root directory create a pages folder and place in there
+ home.html file. At the top (first line) should be found
+ {% load static %} phrase which allows to contains static files.
+
+
+ At the end of head section place link for Tailwind CSS file.
+
+
+
+
+ {{< twsnippet/wrapper "home.html" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="HTML" >}}
+
+
+ Step 6
+
+ In home.html file, at the end of body link script
+ for Tailwind Elements JS file.
+
+
+
+
+ {{< twsnippet/wrapper "home.html" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="HTML" >}}
+
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+ Step 7
+
+ Create views.py file in mysite folder and put in
+ there render for your first / home page.
+
+
+
+
+ {{< twsnippet/wrapper "views.py" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="python" >}}
+ from django.shortcuts import render
+
+ def home_view(request):
+ return render(request, "pages/home.html", {})
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+ Step 8
+
+ Then in urls.py file (located in mysite folder)
+ add import newly created views.py file and attach urls for
+ paths with static files.
+
+
+
+
+ {{< twsnippet/wrapper "settings.py" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="python" >}}
+ from django.conf import settings
+ ...
+ from . import views
+
+ urlpatterns = [
+ path("", views.home_view),
+ path('admin/', admin.site.urls),
+ ]
+
+ if settings.DEBUG:
+ from django.conf.urls.static import static
+ urlpatterns += static(settings.STATIC_URL,
+ document_root=settings.STATIC_ROOT)
+ urlpatterns += static(settings.TE_URL,
+ document_root=settings.STATIC_ROOT)
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+ Step 9
+
+ Alternatively at the end of body in
+ home.html include script tag with linking to
+ Tailwind Elements CDN.
+
+
+
+
+ {{< twsnippet/wrapper "home.html" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="HTML" >}}
+
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+
diff --git a/site/content/docs/standard/integrations/express/index-ss.html b/site/content/docs/standard/integrations/express/index-ss.html
new file mode 100644
index 000000000..5e6b37e4b
--- /dev/null
+++ b/site/content/docs/standard/integrations/express/index-ss.html
@@ -0,0 +1,14 @@
+---
+---
+
+
+ Prerequisites
+
+
+ Creating a new Express.js application
+
+
+ Installing and configuring Tailwind CSS and Tailwind Elements
+
diff --git a/site/content/docs/standard/integrations/express/index.html b/site/content/docs/standard/integrations/express/index.html
new file mode 100644
index 000000000..837bde20d
--- /dev/null
+++ b/site/content/docs/standard/integrations/express/index.html
@@ -0,0 +1,276 @@
+---
+title: "Express integration"
+date: 2021-04-29T16:00:58+02:00
+draft: false
+main_title: "Tailwind Elements Express integration"
+subheading: ""
+seo_title: "Tailwind Elements integration with Express - Free Examples & Tutorial"
+description: "This article shows you how to integrate Express application with Tailwind Elements. Free download, AGPL license."
+image: "img/components-big.jpg"
+url: "docs/standard/integrations/express-integration/"
+menu:
+ integrations:
+ name: "Express"
+---
+
+
+
+
+
+
+ Prerequisites
+
+
+
+
+ Before starting the project make sure to install the following utilities:
+
+
+
+
+ Node LTS
+ (14.x.x or higher recommended)
+
+
+ Code editor. We recommend
+ VSCode
+
+
+
+
+
+
+ Creating a new Express application
+
+
+
+
+ Let's create a fresh Express application so that we can go through all the
+ steps together.
+
+
+ Step 1
+ Create new project
+
+
+
+ {{< twsnippet/wrapper "Terminal" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="plaintext" type="terminal" >}}
+ mkdir my-project
+ cd my-project
+ npm init
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+ Step 2
+ Install Express
+
+
+
+ {{< twsnippet/wrapper "Terminal" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="plaintext" type="terminal" >}}
+ npm install express
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+ Step 3
+
+ Create folder views (in root directory) and put inside
+ index.ejs file with classical HTML structure.
+
+
+
+ Step 4
+
+ In root directory create index.js file where will be located
+ your Express configuration.
+
+
+
+
+ {{< twsnippet/wrapper "index.js" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="JavaScript" >}}
+ const express = require("express");
+ const app = express();
+ const port = 3000;
+ const path = require("path");
+
+ app.set("view engine", "ejs");
+ app.use(express.static("public"));
+ app.use(express.static("node_modules"));
+
+ app.get("/", (req, res) => {
+ res.render("index");
+ });
+
+ app.listen(port, () => {
+ console.log(`Example app listening on port ${port}`);
+ });
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+
+
+
+ Installing and configuring Tailwind CSS and Tailwind Elements
+
+
+
+ Step 1
+ Install Tailwind CSS
+
+
+
+ {{< twsnippet/wrapper "Terminal" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="plaintext" type="terminal" >}}
+ npm install -D tailwindcss postcss autoprefixer
+ npx tailwindcss init -p
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+ Step 2
+
+ Add the paths to all of your template files in your
+ tailwind.config.cjs file.
+
+
+
+
+ {{< twsnippet/wrapper "tailwind.config.cjs" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="JavaScript" >}}
+ /** @type {import('tailwindcss').Config} */
+ module.exports = {
+ content: [
+ "./public/**/*.{html,js,css}",
+ "./src/**/*.{html,js,css}",
+ "./node_modules/tw-elements/dist/js/**/*.js",
+ ],
+ plugins: [require("tw-elements/dist/plugin")]
+ }
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+ Step 3
+
+ Add the @tailwind directives for each of Tailwind’s layers to
+ your input.css file in root directory.
+
+
+
+
+ {{< twsnippet/wrapper "input.css" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="CSS" >}}
+ @tailwind base;
+ @tailwind components;
+ @tailwind utilities;
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+ Step 4
+
+ Start the Tailwind CLI build process. Run the CLI tool to scan your
+ template files for classes and build your CSS.
+
+
+
+
+ {{< twsnippet/wrapper "Terminal" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="plaintext" type="terminal" >}}
+ npx tailwindcss -i ./src/input.css -o ./public/output.css --watch
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+ Step 5
+ Install ejs.
+
+
+
+ {{< twsnippet/wrapper "Terminal" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="plainext" type="terminal" >}}
+ npm install ejs
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+ Step 6
+
+ In index.ejs file, at the end of head link
+ Tailwind's CSS file.
+
+
+
+
+ {{< twsnippet/wrapper "index.ejs" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="HTML" >}}
+
+
+ Step 7
+
+ In index.ejs file, at the end of body link
+ script for Tailwind Elements JS file.
+
+
+
+
+ {{< twsnippet/wrapper "index.ejs" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="HTML" >}}
+
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+ Step 8
+
+ Alternatively at the end of body in
+ index.ejs include script tag with linking to
+ Tailwind Elements CDN.
+
+
+
+
+ {{< twsnippet/wrapper "index.ejs" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="HTML" >}}
+
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+
+
diff --git a/site/content/docs/standard/integrations/laravel/index-ss.html b/site/content/docs/standard/integrations/laravel/index-ss.html
new file mode 100644
index 000000000..533218cf9
--- /dev/null
+++ b/site/content/docs/standard/integrations/laravel/index-ss.html
@@ -0,0 +1,14 @@
+---
+---
+
+
+ Prerequisites
+
+
+ Creating a new Laravel application
+
+
+ Installing and configuring Tailwind CSS and Tailwind Elements
+
diff --git a/site/content/docs/standard/integrations/laravel/index.html b/site/content/docs/standard/integrations/laravel/index.html
new file mode 100644
index 000000000..db45d4c2f
--- /dev/null
+++ b/site/content/docs/standard/integrations/laravel/index.html
@@ -0,0 +1,215 @@
+---
+title: "Laravel integration"
+date: 2021-04-29T16:00:58+02:00
+draft: false
+main_title: "Tailwind Elements Laravel integration"
+subheading: ""
+seo_title: "Tailwind Elements integration with Laravel - Free Examples & Tutorial"
+description: "This article shows you how to integrate Laravel application with Tailwind Elements. Free download, AGPL license."
+image: "img/components-big.jpg"
+url: "docs/standard/integrations/laravel-integration/"
+menu:
+ integrations:
+ name: "Laravel"
+---
+
+
+
+
+
+
+ Prerequisites
+
+
+
+
+ Before starting the project make sure to install the following utilities:
+
+
+
+
+ Node LTS
+ (14.x.x or higher recommended)
+
+
+ Code editor. We recommend
+ VSCode
+
+
+
+
+
+
+
+ Creating a new Laravel application
+
+
+
+
+ Let's create a fresh Laravel application so that we can go through all the
+ steps together.
+
+
+ Step 1
+ Create new project
+
+
+
+ {{< twsnippet/wrapper "Terminal" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="plaintext" type="terminal" >}}
+ composer create-project laravel/laravel my-project
+ cd my-project
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+
+
+
+
+ Installing and configuring Tailwind CSS and Tailwind Elements
+
+
+
+ Step 1
+ Install Tailwind CSS
+
+
+
+ {{< twsnippet/wrapper "Terminal" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="plaintext" type="terminal" >}}
+ npm install -D tailwindcss postcss autoprefixer
+ npx tailwindcss init -p
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+ Step 2
+
+ Add the paths to all of your template files in your
+ tailwind.config.cjs file.
+
+
+
+
+ {{< twsnippet/wrapper "tailwind.config.cjs" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="JavaScript" >}}
+ /** @type {import('tailwindcss').Config} */
+ module.exports = {
+ content: [
+ "./resources/**/*.blade.php",
+ "./resources/**/*.js",
+ "./resources/**/*.vue",
+ "./node_modules/tw-elements/dist/js/**/*.js"
+ ],
+ theme: {
+ extend: {},
+ },
+ plugins: [require("tw-elements/dist/plugin")]
+ }
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+ Step 3
+
+ Add the @tailwind directives for each of Tailwind’s layers to
+ your ./resources/css/app.css file.
+
+
+
+
+ {{< twsnippet/wrapper "app.css" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="CSS" >}}
+ @tailwind base;
+ @tailwind components;
+ @tailwind utilities;
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+ Step 4
+ Install Tailwind Elements.
+
+
+
+ {{< twsnippet/wrapper "Terminal" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="plaintext" type="terminal" >}}
+ npm install tw-elements
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+ Step 5
+
+ Import Tailwind Elements in app.js file which is located in
+ ./resources/js directory.
+
+
+
+
+ {{< twsnippet/wrapper "app.js" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="JavaScript" >}}
+ import * as te from "tw-elements";
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+ Step 6
+
+ Make sure your compiled CSS and JS are included in the
+ head in welcome.blade.php file (located in
+ ./resources/views directory).
+
+
+
+
+ {{< twsnippet/wrapper "Terminal" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="plaintext" type="terminal" >}}
+ @vite('resources/css/app.css')
+ @vite('resources/js/app.js')
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+ Step 7
+
+ Alternatively you can import Tailwind Elements by adding
+ script tag in body section.
+
+
+
+
+ {{< twsnippet/wrapper "welcome.blade.php" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="HTML" >}}
+
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+
diff --git a/site/content/docs/standard/integrations/next/index-ss.html b/site/content/docs/standard/integrations/next/index-ss.html
new file mode 100644
index 000000000..d2b33a24a
--- /dev/null
+++ b/site/content/docs/standard/integrations/next/index-ss.html
@@ -0,0 +1,14 @@
+---
+---
+
+
+ Prerequisites
+
+
+ Creating a new Next application
+
+
+ Installing and configuring Tailwind CSS and Tailwind Elements
+
diff --git a/site/content/docs/standard/integrations/next/index.html b/site/content/docs/standard/integrations/next/index.html
new file mode 100644
index 000000000..3da2dbce0
--- /dev/null
+++ b/site/content/docs/standard/integrations/next/index.html
@@ -0,0 +1,218 @@
+---
+title: "Next integration"
+date: 2021-04-29T16:00:58+02:00
+draft: false
+main_title: "Tailwind Elements Next integration"
+subheading: ""
+seo_title: "Tailwind Elements integration with Next - Free Examples & Tutorial"
+description: "This article shows you how to integrate Next application with Tailwind Elements. Free download, AGPL license."
+image: "img/components-big.jpg"
+url: "docs/standard/integrations/next-integration/"
+menu:
+ integrations:
+ name: "Next"
+---
+
+
+
+
+
+
+ Prerequisites
+
+
+
+
+ Before starting the project make sure to install the following utilities:
+
+
+
+
+ Node LTS
+ (14.x.x or higher recommended)
+
+
+ Code editor. We recommend
+ VSCode
+
+
+
+
+
+ Due to the way the library is imported, components are not accessible via
+ JavaScript (only via data attributes).
+
+
+
+
+ Creating a new Next application
+
+
+
+
+ Let's create a fresh Next application so that we can go through all the
+ steps together.
+
+
+ Step 1
+ Create new project
+
+
+
+ {{< twsnippet/wrapper "Terminal" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="plaintext" type="terminal" >}}
+ npx create-next-app@latest
+ cd my-project
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+
+
+
+
+ Installing and configuring Tailwind CSS and Tailwind Elements
+
+
+
+ Step 1
+ Install Tailwind CSS
+
+
+
+ {{< twsnippet/wrapper "Terminal" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="plaintext" type="terminal" >}}
+ npm install -D tailwindcss postcss autoprefixer
+ npx tailwindcss init -p
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+ Step 2
+
+ Add the paths to all of your template files in your
+ tailwind.config.cjs file.
+
+
+
+
+ {{< twsnippet/wrapper "tailwind.config.cjs" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="JavaScript" >}}
+ /** @type {import('tailwindcss').Config} */
+ module.exports = {
+ content: [
+ "./app/**/*.{js,ts,jsx,tsx}",
+ "./pages/**/*.{js,ts,jsx,tsx}",
+ "./components/**/*.{js,ts,jsx,tsx}",
+ "./node_modules/tw-elements/dist/js/**/*.js"
+
+ // Or if using `src` directory:
+ "./src/**/*.{js,ts,jsx,tsx}",
+ "./node_modules/tw-elements/dist/js/**/*.js"
+ ],
+ theme: {
+ extend: {},
+ },
+ plugins: [require("tw-elements/dist/plugin")]
+ }
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+ Step 3
+
+ Add the @tailwind directives for each of Tailwind’s layers to
+ your ./src/styles/global.css file.
+
+
+
+
+ {{< twsnippet/wrapper "global.css" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="CSS" >}}
+ @tailwind base;
+ @tailwind components;
+ @tailwind utilities;
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+ Step 4
+ Install Tailwind Elements.
+
+
+
+ {{< twsnippet/wrapper "Terminal" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="plaintext" type="terminal" >}}
+ npm install tw-elements
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+ Step 5
+
+ In _app.js file (located in
+ src/pages/ directory) put lifecycle method where are you
+ going to dynamically importing library.
+
+
+
+
+ {{< twsnippet/wrapper "_app.js" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="JavaScript" >}}
+ useEffect(() => {
+ const importTE = async () => {
+ (await import("tw-elements")).default;
+ };
+ importTE();
+ }, []);
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+ Step 6
+
+ Alternatively you can import Tailwind Elements by adding
+ script tag in _app.js file (located in
+ src/pages/ directory).
+
+
+
+
+ {{< twsnippet/wrapper "_app.js" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="HTML" >}}
+
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+
+
diff --git a/site/content/docs/standard/integrations/nuxt/index-ss.html b/site/content/docs/standard/integrations/nuxt/index-ss.html
new file mode 100644
index 000000000..9ce7cebe8
--- /dev/null
+++ b/site/content/docs/standard/integrations/nuxt/index-ss.html
@@ -0,0 +1,17 @@
+---
+---
+
+
+ Prerequisites
+
+
+ Creating a new Nuxt application
+
+
+ Installing and configuring Tailwind CSS and Tailwind Elements
+
+
+ Initializing via JS
+
diff --git a/site/content/docs/standard/integrations/nuxt/index.html b/site/content/docs/standard/integrations/nuxt/index.html
new file mode 100644
index 000000000..a1138c208
--- /dev/null
+++ b/site/content/docs/standard/integrations/nuxt/index.html
@@ -0,0 +1,296 @@
+---
+title: "Nuxt integration"
+date: 2021-04-29T16:00:58+02:00
+draft: false
+main_title: "Tailwind Elements Nuxt integration"
+subheading: ""
+seo_title: "Tailwind Elements integration with Nuxt - Free Examples & Tutorial"
+description: "This article shows you how to integrate Nuxt application with Tailwind Elements. Free download, AGPL license."
+image: "img/components-big.jpg"
+url: "docs/standard/integrations/nuxt-integration/"
+menu:
+ integrations:
+ name: "Nuxt"
+---
+
+
+
+
+
+
+ Prerequisites
+
+
+
+
+ Before starting the project make sure to install the following utilities:
+
+
+
+
+ Node LTS
+ (14.x.x or higher recommended)
+
+
+ Code editor. We recommend
+ VSCode
+
+
+
+
+
+
+
+ Creating a new Nuxt application
+
+
+
+
+ Let's create a fresh Nuxt application so that we can go through all the
+ steps together.
+
+
+ Step 1
+ Create new project
+
+
+
+ {{< twsnippet/wrapper "Terminal" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="plaintext" type="terminal" >}}
+ npx nuxi init my-project
+ cd my-project
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+
+
+
+
+ Installing and configuring Tailwind CSS and Tailwind Elements
+
+
+
+ Step 1
+ Install Tailwind CSS
+
+
+
+ {{< twsnippet/wrapper "Terminal" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="plaintext" type="terminal" >}}
+ npm install -D tailwindcss postcss autoprefixer
+ npx tailwindcss init
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+ Step 2
+
+ Add tailwindcss and autoprefixer to the
+ postcss.plugins object in your
+ nuxt.config.js file. And of cours you got to attach
+ css object with localization of main .css file.
+
+
+
+
+ {{< twsnippet/wrapper "nuxt.config.js" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="JavaScript" >}}
+ // https://v3.nuxtjs.org/api/configuration/nuxt.config
+ export default defineNuxtConfig({
+ css: ['~/assets/css/main.css'],
+ postcss: {
+ plugins: {
+ tailwindcss: {},
+ autoprefixer: {},
+ },
+ },
+ })
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+ Step 3
+
+ Add the paths to all of your template files in your
+ tailwind.config.cjs file.
+
+
+
+
+ {{< twsnippet/wrapper "tailwind.config.cjs" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="JavaScript" >}}
+ /** @type {import('tailwindcss').Config} */
+ module.exports = {
+ content: [
+ "./components/**/*.{js,vue,ts}",
+ "./layouts/**/*.vue",
+ "./pages/**/*.vue",
+ "./plugins/**/*.{js,ts}",
+ "./nuxt.config.{js,ts}",
+ "./app.vue",
+ "./node_modules/tw-elements/dist/js/**/*.js"
+ ],
+ theme: {
+ extend: {},
+ },
+ plugins: [require("tw-elements/dist/plugin")]
+ }
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+ Step 4
+
+ Add the @tailwind directives for each of Tailwind’s layers to
+ your ./assets/css/main.css file.
+
+
+
+
+ {{< twsnippet/wrapper "main.css" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="CSS" >}}
+ @tailwind base;
+ @tailwind components;
+ @tailwind utilities;
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+ Step 5
+ Install Tailwind Elements.
+
+
+
+ {{< twsnippet/wrapper "Terminal" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="plaintext" type="terminal" >}}
+ npm install tw-elements
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+ Step 6
+
+ In _app.js file (located in src/pages/ directory)
+ put lifecycle method where are you going to dynamically importing library.
+
+
+
+
+ {{< twsnippet/wrapper "_app.js" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="JavaScript" >}}
+ useEffect(() => {
+ const importTE = async () => {
+ (await import("tw-elements")).default;
+ };
+ importTE();
+ }, []);
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+ Step 7
+
+ Alternatively you can import Tailwind Elements by adding
+ script tag in nuxt.config.js file (located in root
+ directory).
+
+
+
+
+ {{< twsnippet/wrapper "nuxt.config.js" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="JavaScript" >}}
+ app: {
+ head: {
+ script: [
+ {
+ src: "https://cdn.jsdelivr.net/npm/tw-elements/dist/js/index.min.js",
+ },
+ ],
+ },
+ },
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+
+
+
+
+
+ Initializing via JS
+
+
+
+
+ By default all components have autoinit which means they are initialized by
+ data attributes. But if you want to make init by JavaScript - there is also
+ possibility to do that.
+
+
+ Step 1
+ Import library.
+
+
+
+ {{< twsnippet/wrapper "App.vue" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="JavaScript" >}}
+ import * as te from "tw-elements";
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+ Step 2
+ Initialize component in lifecycle hook.
+
+
+
+ {{< twsnippet/wrapper "App.vue" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="JavaScript" >}}
+ import { onMounted } from "vue";
+
+ onMounted(() => {
+ const options = {
+ format: "dd-mm-yyyy",
+ };
+ const myDatepicker = new te.Datepicker(
+ document.getElementById("myDatepicker"),
+ options
+ );
+ });
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+
diff --git a/site/content/docs/standard/integrations/react/index-ss.html b/site/content/docs/standard/integrations/react/index-ss.html
new file mode 100644
index 000000000..355d51e3a
--- /dev/null
+++ b/site/content/docs/standard/integrations/react/index-ss.html
@@ -0,0 +1,17 @@
+---
+---
+
+
+ Prerequisites
+
+
+ Creating a new React application
+
+
+ Installing and configuring Tailwind CSS and Tailwind Elements
+
+
+ Initializing via JS
+
diff --git a/site/content/docs/standard/integrations/react/index.html b/site/content/docs/standard/integrations/react/index.html
new file mode 100644
index 000000000..e2f3995e3
--- /dev/null
+++ b/site/content/docs/standard/integrations/react/index.html
@@ -0,0 +1,266 @@
+---
+title: "React integration"
+date: 2021-04-29T16:00:58+02:00
+draft: false
+main_title: "Tailwind Elements React integration"
+subheading: ""
+seo_title: "Tailwind Elements integration with React - Free Examples & Tutorial"
+description: "This article shows you how to integrate React application with Tailwind Elements. Free download, AGPL license."
+image: "img/components-big.jpg"
+url: "docs/standard/integrations/react-integration/"
+menu:
+ integrations:
+ name: "React"
+---
+
+
+
+
+
+
+ Prerequisites
+
+
+
+
+ Before starting the project make sure to install the following utilities:
+
+
+
+
+ Node LTS
+ (14.x.x or higher recommended)
+
+
+ Code editor. We recommend
+ VSCode
+
+
+
+
+
+ React Tailwind Elements:
+ waiting list availabable here .
+
+
+
+
+
+
+ Creating a new React application
+
+
+
+
+ Let's create a fresh React application so that we can go through all the
+ steps together. We are going to do this through
+ Vite
+ - very popular and extremly light module bundler.
+
+
+ Step 1
+ Create new project
+
+
+
+ {{< twsnippet/wrapper "Terminal" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="plaintext" type="terminal" >}}
+ npm create vite@latest my-project -- --template react
+ cd my-project
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+
+
+
+
+ Installing and configuring Tailwind CSS and Tailwind Elements
+
+
+
+ Step 1
+ Install Tailwind CSS
+
+
+
+ {{< twsnippet/wrapper "Terminal" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="plaintext" type="terminal" >}}
+ npm install -D tailwindcss postcss autoprefixer
+ npx tailwindcss init -p
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+ Step 2
+
+ Add the paths to all of your template files in your
+ tailwind.config.cjs file.
+
+
+
+
+ {{< twsnippet/wrapper "tailwind.config.cjs" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="JavaScript" >}}
+ /** @type {import('tailwindcss').Config} */
+ module.exports = {
+ content: [
+ "./index.html",
+ "./src/**/*.{js,ts,jsx,tsx}",
+ "./node_modules/tw-elements/dist/js/**/*.js"
+ ],
+ theme: {
+ extend: {},
+ },
+ plugins: [require("tw-elements/dist/plugin")]
+ }
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+ Step 3
+
+ Add the @tailwind directives for each of Tailwind’s layers to
+ your ./src/index.css file.
+
+
+
+
+ {{< twsnippet/wrapper "index.css" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="CSS" >}}
+ @tailwind base;
+ @tailwind components;
+ @tailwind utilities;
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+ Step 4
+ Install Tailwind Elements.
+
+
+
+ {{< twsnippet/wrapper "Terminal" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="plaintext" type="terminal" >}}
+ npm install tw-elements
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+ Step 5
+
+ In App.jsx file (located in src/ directory) put
+ lifecycle method where are you going to dynamically importing library.
+
+
+
+
+ {{< twsnippet/wrapper "App.jsx" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="JavaScript" >}}
+ useEffect(() => {
+ const importTE = async () => {
+ await import("tw-elements");
+ };
+ importTE();
+ }, []);
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+
+
+
+
+
+
+ Initializing via JS
+
+
+
+
+ By default all components have autoinit which means they are initialized by
+ data attributes. But if you want to make init by JavaScript - there is also
+ possibility to do that.
+
+
+ Step 1
+ Import library.
+
+
+
+ {{< twsnippet/wrapper "App.jsx" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="JavaScript" >}}
+ import * as te from "tw-elements";
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+ Step 2
+ Initialize component in lifecycle hook.
+
+
+
+ {{< twsnippet/wrapper "App.jsx" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="JavaScript" >}}
+ import React, { useEffect } from "svelte";
+
+ useEffect(() => {
+ const options = {
+ format: "dd-mm-yyyy",
+ };
+ const myDatepicker = new te.Datepicker(
+ document.getElementById("myDatepicker"),
+ options
+ );
+ }, []);
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+
diff --git a/site/content/docs/standard/integrations/svelte/index-ss.html b/site/content/docs/standard/integrations/svelte/index-ss.html
new file mode 100644
index 000000000..409b6109b
--- /dev/null
+++ b/site/content/docs/standard/integrations/svelte/index-ss.html
@@ -0,0 +1,17 @@
+---
+---
+
+
+ Prerequisites
+
+
+ Creating a new Svelte application
+
+
+ Installing and configuring Tailwind CSS and Tailwind Elements
+
+
+ Initializing via JS
+
diff --git a/site/content/docs/standard/integrations/svelte/index.html b/site/content/docs/standard/integrations/svelte/index.html
new file mode 100644
index 000000000..f36dae774
--- /dev/null
+++ b/site/content/docs/standard/integrations/svelte/index.html
@@ -0,0 +1,300 @@
+---
+title: "Svelte integration"
+date: 2021-04-29T16:00:58+02:00
+draft: false
+main_title: "Tailwind Elements Svelte integration"
+subheading: ""
+seo_title: "Tailwind Elements integration with Svelte - Free Examples & Tutorial"
+description: "This article shows you how to integrate Svelte application with Tailwind Elements. Free download, AGPL license."
+image: "img/components-big.jpg"
+url: "docs/standard/integrations/svelte-integration/"
+menu:
+ integrations:
+ name: "Svelte"
+---
+
+
+
+
+
+ Prerequisites
+
+
+
+
+ Before starting the project make sure to install the following utilities:
+
+
+
+
+ Node LTS
+ (14.x.x or higher recommended)
+
+
+ Code editor. We recommend
+ VSCode
+
+
+
+
+
+
+
+
+ Creating a new Svelte application
+
+
+
+
+ Let's create a fresh Svelte application so that we can go through all the
+ steps together.
+
+
+ Step 1
+ Create new project.
+
+
+
+ {{< twsnippet/wrapper "Terminal" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="plaintext" type="terminal" >}}
+ npm create svelte@latest my-project
+ cd my-project
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+ Step 2
+ Install all dependencies.
+
+
+
+ {{< twsnippet/wrapper "Terminal" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="plaintext" type="terminal" >}}
+ npm install
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+
+
+
+
+
+ Installing and configuring Tailwind CSS and Tailwind Elements
+
+
+
+ Step 1
+ Install Tailwind CSS
+
+
+
+ {{< twsnippet/wrapper "Terminal" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="plaintext" type="terminal" >}}
+ npm install -D tailwindcss postcss autoprefixer
+ npx tailwindcss init tailwind.config.cjs -p
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+ Step 2
+
+ Add the paths to all of your template files in your
+ tailwind.config.cjs file.
+
+
+
+
+ {{< twsnippet/wrapper "tailwind.config.cjs" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="JavaScript" >}}
+ /** @type {import('tailwindcss').Config} */
+ module.exports = {
+ content: [
+ "./src/**/*.{html,js,svelte,ts}",
+ "./node_modules/tw-elements/dist/js/**/*.js"
+ ],
+ theme: {
+ extend: {},
+ },
+ plugins: [require("tw-elements/dist/plugin")]
+ }
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+ Step 3
+
+ In your svelte.config.js file, import
+ vitePreprocess to enable processing style blocks
+ as PostCSS.
+
+
+
+
+ {{< twsnippet/wrapper "svelte.config.js" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="JavaScript" >}}
+ import adapter from '@sveltejs/adapter-auto';
+ import { vitePreprocess } from '@sveltejs/kit/vite';
+
+ /** @type {import('@sveltejs/kit').Config} */
+ const config = {
+ kit: {
+ adapter: adapter()
+ },
+ preprocess: vitePreprocess()
+ };
+
+ export default config;
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+ Step 4
+
+ Create a ./src/app.css file and add the
+ @tailwind directives for each of Tailwind’s layers.
+
+
+
+
+ {{< twsnippet/wrapper "app.css" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="CSS" >}}
+ @tailwind base;
+ @tailwind components;
+ @tailwind utilities;
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+ Step 5
+
+ Create a ./src/routes/+layout.svelte file and import the
+ newly-created app.css file.
+
+
+
+
+ {{< twsnippet/wrapper "+layout.svelte" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="HTML" >}}
+
+
+
+
+ Step 6
+ Install Tailwind Elements.
+
+
+
+ {{< twsnippet/wrapper "Terminal" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="plaintext" type="terminal" >}}
+ npm install tw-elements
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+ Step 7
+
+ In +layout.svelte file (located in
+ src/routes/ directory) put lifecycle method where are you going
+ to dynamically importing library.
+
+
+
+
+ {{< twsnippet/wrapper "+layout.svelte" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="JavaScript" >}}
+ import { onMount } from "svelte";
+
+ onMount(async () => {
+ await import("tw-elements");
+ });
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+
+
+
+
+
+ Initializing via JS
+
+
+
+
+ By default all components have autoinit which means they are initialized by
+ data attributes. But if you want to make init by JavaScript - there is also
+ possibility to do that.
+
+
+ Step 1
+ Import library.
+
+
+
+ {{< twsnippet/wrapper "+page.svelte" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="JavaScript" >}}
+ import * as te from "tw-elements";
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+ Step 2
+ Initialize component in lifecycle hook.
+
+
+
+ {{< twsnippet/wrapper "+page.svelte" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="JavaScript" >}}
+ import { onMount } from "svelte";
+
+ onMount(() => {
+ const options = {
+ format: "dd-mm-yyyy",
+ };
+ const myDatepicker = new te.Datepicker(
+ document.getElementById("myDatepicker"),
+ options
+ );
+ });
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+
diff --git a/site/content/docs/standard/integrations/vue/index-ss.html b/site/content/docs/standard/integrations/vue/index-ss.html
new file mode 100644
index 000000000..62bfe667c
--- /dev/null
+++ b/site/content/docs/standard/integrations/vue/index-ss.html
@@ -0,0 +1,17 @@
+---
+---
+
+
+ Prerequisites
+
+
+ Creating a new Vue application
+
+
+ Installing and configuring Tailwind CSS and Tailwind Elements
+
+
+ Initializing via JS
+
diff --git a/site/content/docs/standard/integrations/vue/index.html b/site/content/docs/standard/integrations/vue/index.html
new file mode 100644
index 000000000..73ced36f6
--- /dev/null
+++ b/site/content/docs/standard/integrations/vue/index.html
@@ -0,0 +1,271 @@
+---
+title: "Vue integration"
+date: 2021-04-29T16:00:58+02:00
+draft: false
+main_title: "Tailwind Elements Vue integration"
+subheading: ""
+seo_title: "Tailwind Elements integration with Vue - Free Examples & Tutorial"
+description: "This article shows you how to integrate Vue application with Tailwind Elements. Free download, AGPL license."
+image: "img/components-big.jpg"
+url: "docs/standard/integrations/vue-integration/"
+menu:
+ integrations:
+ name: "Vue"
+---
+
+
+
+
+
+
+ Prerequisites
+
+
+
+
+ Before starting the project make sure to install the following utilities:
+
+
+
+
+ Node LTS
+ (14.x.x or higher recommended)
+
+
+ Code editor. We recommend
+ VSCode
+
+
+
+
+
+ Vue Tailwind Elements:
+ waiting list availabable here .
+
+
+
+
+
+
+
+ Creating a new Vue application
+
+
+
+
+ Let's create a fresh Vue application so that we can go through all the steps
+ together. We are going to do this through
+ Vite
+ - very popular and extremly light module bundler.
+
+
+ Step 1
+ Create new project
+
+
+
+ {{< twsnippet/wrapper "Terminal" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="plaintext" type="terminal" >}}
+ npm create vite@latest my-project -- --template vue
+ cd my-project
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+
+
+
+
+
+ Installing and configuring Tailwind CSS and Tailwind Elements
+
+
+
+ Step 1
+ Install Tailwind CSS
+
+
+
+ {{< twsnippet/wrapper "Terminal" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="plaintext" type="terminal" >}}
+ npm install -D tailwindcss postcss autoprefixer
+ npx tailwindcss init
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+ Step 2
+
+ Add the paths to all of your template files in your
+ tailwind.config.cjs file.
+
+
+
+
+ {{< twsnippet/wrapper "tailwind.config.cjs" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="JavaScript" >}}
+ /** @type {import('tailwindcss').Config} */
+ module.exports = {
+ content: [
+ "./index.html",
+ "./src/**/*.{vue,js,ts,jsx,tsx}",
+ "./node_modules/tw-elements/dist/js/**/*.js"
+ ],
+ theme: {
+ extend: {},
+ },
+ plugins: [require("tw-elements/dist/plugin")]
+ }
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+ Step 3
+
+ Add the @tailwind directives for each of Tailwind’s layers to
+ your ./src/style.css file.
+
+
+
+
+ {{< twsnippet/wrapper "style.css" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="CSS" >}}
+ @tailwind base;
+ @tailwind components;
+ @tailwind utilities;
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+ Step 4
+ Install Tailwind Elements.
+
+
+
+ {{< twsnippet/wrapper "Terminal" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="plaintext" type="terminal" >}}
+ npm install tw-elements
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+ Step 5
+
+ In App.vue file (located in src/ directory) put
+ lifecycle method where are you going to dynamically importing library.
+
+
+
+
+ {{< twsnippet/wrapper "App.vue" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="JavaScript" >}}
+ import { onMounted } from "vue";
+
+ onMounted(() => {
+ const importTE = async () => {
+ await import("tw-elements");
+ };
+ importTE();
+ });
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+
+
+
+
+
+ Initializing via JS
+
+
+
+
+ By default all components have autoinit which means they are initialized by
+ data attributes. But if you want to make init by JavaScript - there is also
+ possibility to do that.
+
+
+ Step 1
+ Import library.
+
+
+
+ {{< twsnippet/wrapper "App.vue" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="JavaScript" >}}
+ import * as te from "tw-elements";
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+ Step 2
+ Initialize component in lifecycle hook.
+
+
+
+ {{< twsnippet/wrapper "App.vue" "" "mobile" >}}
+ {{< twsnippet/code active=true lang="JavaScript" >}}
+ import { onMounted } from "vue";
+
+ onMounted(() => {
+ const options = {
+ format: "dd-mm-yyyy",
+ };
+ const myDatepicker = new te.Datepicker(
+ document.getElementById("myDatepicker"),
+ options
+ );
+ });
+ {{< /twsnippet/code >}}
+ {{< /twsnippet/wrapper >}}
+
+
+
diff --git a/site/layouts/partials/sidenav/standard.html b/site/layouts/partials/sidenav/standard.html
index dd0ae18ef..53ee847d6 100644
--- a/site/layouts/partials/sidenav/standard.html
+++ b/site/layouts/partials/sidenav/standard.html
@@ -81,6 +81,67 @@
{{ end }}
-->
+
+
+
+
+
+
+ Integrations
+ svg]:h-3 [&>svg]:w-3 [&>svg]:text-gray-600 dark:[&>svg]:text-gray-300"
+ data-te-sidenav-rotate-icon-ref>
+
+
+
+
+
+ {{ $currentNode := . }}
+ {{ range.Site.Menus.integrations }}
+
+
+
+ {{ end }}
+
+
+