Before we start learning EdgeJS’ component system and building our components, we’re first going to need a project to work within. We’ll also need to get AlpineJS and TailwindCSS installed and configured.
Create a New Project
First, we’ll need to set up a new project to work with. To do this, we’ll run the following command, replacing edgejs-components with your preferred project name:
npm init adonis-ts-app@latest edgejs-componentsCopied!
When prompted, select the web project structure, and leave the project name as it is. You can also choose to include ESLint and Prettier at this stage. Additionally, configure Webpack Encore to compile frontend assets.
Navigate to the Project Directory
Once the project is created, let's navigate to our project by running:
cd edgejs-componentsCopied!
Install Required Libraries
Next, let's install the necessary libraries for our UI components. PinesUI builds on TailwindCSS and AlpineJS but doesn’t require any packages of its own, so we’ll just need to install these two.
Install TailwindCSS
Let's start by installing TailwindCSS by running the following commands:
npm install -D tailwindcss postcss postcss-loader autoprefixer npx tailwindcss init -pCopied!
This command installs TailwindCSS, PostCSS, PostCSS Loader, and AutoPrefixer. It also creates configuration files for TailwindCSS and PostCSS.
Configure TailwindCSS
Next, we’ll need to enable the PostCSS Loader in our Webpack configuration. Open your project in your code editor and navigate to webpack.config.js. Search for "PostCss," and uncomment the line that reads Encore.enablePostCssLoader().
Configure PurgeCSS
PurgeCSS is included with TailwindCSS and helps remove unused styles. To configure it, we’ll need to modify our tailwind.config.js file. At this point, you can replace everything in this file with the below.
// tailwind.config.js /** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./resources/**/*.{edge,js,ts,jsx,tsx,vue}", ], theme: { extend: {}, }, plugins: [], }Copied!
This content array tells PurgeCSS to look within the resources directory for files with specific extensions (e.g., .edge, .js, .ts, .jsx, .tsx, .vue).
Adding TailwindCSS Directives
Now let's replace the content of our CSS file with the directives from TailwindCSS. Navigate to resources/css/app.css and replace its contents with the directives below.
// resources/css/app.css @tailwind base; @tailwind components; @tailwind utilities;Copied!
Test Tailwind CSS
Now, we can test if TailwindCSS is working as expected by adding some classes to our HTML in our project's welcome view file.
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> @entryPointStyles('app') </head> <body> <h1 class="text-3xl font-bold underline text-red-500"> Hello world! </h1> </body> </html>Copied!
- resources
- views
- welcome.edge
Install AlpineJS
Lastly, to install AlpineJS, run the following command:
npm i alpinejsCopied!
Configure AlpineJS
Then, let's open our JavaScript file (app.js) and import AlpineJS then initialize it.
import Alpine from 'alpinejs'; Alpine.start();Copied!
- resources
- js
- app.js
Test Your Setup
Finally, to verify that everything is set up correctly, let's open back up our welcome.edge view file and apply some AlpineJS to it.
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> @entryPointStyles('app') </head> <body> <h1 x-data="{ text: 'Hello world!' }" x-text="text" class="text-3xl font-bold underline text-red-500"> </h1> </body> </html>Copied!
- resources
- views
- welcome.edge
Save the changes, run npm run dev in your terminal to boot the server up, and check your welcome page to see if your h1 is red and says “Hello world!”.
