TW Elements Vite Starter

>> Support TW Elements with a STAR

>> Tailwind Docs

---

warning: The use of this Starter is at your own risk and assumes basic knowledge of Vite, JavaScript and CSS preprocessors. We recommend creating custom versions of TW Elements and themes only for advanced developers.

---

Installation

npm install

Dev Server

npm start

Build

npm run build

Features:

• Bundling and ES6+ Support via vite
• SASS Support via sass-loader
• Linting via eslint-loader
• Unit Testing via jest
• Code Formatting via prettier

Files structure:

.
├── src
│   ├── js/
│   └── scss/
├── dist/
├── tailwind.config.js
├── vite.config.js
└── index.html

---

TW Elements

Importing JS modules

If you want to use the power of ES modules, import the component you need and init it with initTE method

import { Carousel, initTE } from "tw-elements";
initTE({ Carousel });

If you are using an UMD format you can import the entire library:

import 'tw-elements';

Importing TE plugin

To add TW Elements plugin, please add the following code to tailwind.config.js:

plugins: [require('tw-elements/dist/plugin.js')]

---

CUSTOM VERSION OF TW ELEMENTS

It is possible to prepare a custom version of TW Elements. It can be useful when the project uses only several modules of our library and you want to reduce the size of the compiled files. To achieve this, follow the steps:

npm install

Importing JS components

Copy the content from node_modules/tw-elements/dist/src to the src directory. Pick only the components you need and update necessary paths. Here's an example:

import Input from ./src/js/forms/input';

Some components may require additional dependencies to be installed. Vite should report this after starting a devServer.

Configuration

Vite config for TE development and index.html file is located in root directory.

Dev Server

npm start

Build

npm run build