In previous blog we will see "How to Install Tailwind CSS with NPM " . in this section we will see how to install alpine js in tailwind css. if you are not see that blog please check or setup you project via npm . for install alpine js in tailwind css you can simply use Alpine js CDN or you can install via npm package. for this section we will use esbuild because it is extremely fast JavaScript bundler
before start check 👇
"How to Install Tailwind CSS with NPM "
Step 1
Hope you setup your project ,Now we to first we need to install alpinejs below command
npm install alpinejs
Step 2
Next, you need to install esbuild . it is very fast javascripts bundler ,
npm install esbuild
added 1 package, and audited 142 packages in 2s
21 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
Step 3
Now you need create index.js file. and put alpine js code there .
Alpine JS V3 version
import Alpine from 'alpinejs';
window.Alpine = Alpine;
Alpine.start();
Alpine js V2 version
import 'alpinejs'
Before
we need to setup our scripts to run bundler or you can run esbuild on command line
package.json
{
"name": "tailwind_npm",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build-css": "tailwindcss build style.css -o public/style.css"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^10.2.6",
"postcss": "^8.3.5",
"tailwindcss": "^2.2.4"
},
"dependencies": {
"alpinejs": "^3.2.2",
"esbuild": "^0.12.15"
}
}
After
You need create command for alpinejs run . it is simple give your input file location and where you put your output file.
use any one for you requirements
"alpinjs-dev": "npx esbuild index.js --outfile=dist/bundle.js --bundle"
"alpinjs-dev-w": "npx esbuild index.js --outfile=dist/bundle.js --bundle --watch"
"alpinjs-dev-mini": "npx esbuild index.js --outfile=dist/bundle.js --bundle --minify"
package.json
{
"name": "tailwind_npm",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build-css": "tailwindcss build style.css -o public/style.css",
"alpinjs-dev": "npx esbuild index.js --outfile=dist/bundle.js --bundle"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^10.2.6",
"postcss": "^8.3.5",
"tailwindcss": "^2.2.4"
},
"dependencies": {
"@tailwindcss/forms": "^0.3.3",
"alpinejs": "^3.2.2",
"esbuild": "^0.12.15"
}
}
Now we need to run command After run
npm run alpinjs-dev
> [email protected] alpinjs-dev
> npx esbuild index.js --outfile=dist/bundle.js --bundle
dist/bundle.js 100.5kb
⚡ Done in 27ms
folder
Now ,you can check
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>how to install alpine js in tailwind css</title>
<link rel="stylesheet" href="style.css">
<script src="/dist/bundle.js" defer></script>
</head>
<body>
<div x-data="{ open: false}" class="text-center">
<button @click="open =! open" class="p-4 text-white bg-blue-600">Click</button>
<div x-show="open" class="mt-8">It working</div>
</div>
</body>
</html>
Read Also
Tailwind CSS 3 FAQ Accordion UI Example
Tailwind CSS 3 Alert Message Example
Tailwind CSS 3 Avatars Example
Tailwind CSS 3 Breadcrumb Example
Tailwind CSS Gradient Button Example
Tailwind CSS 3D Button Example
Tailwind CSS Loading Button Example
Tailwind CSS v3 Cards Examples
Tailwind CSS Checkbox Form Examples
Tailwind CSS Dropdowns (Menu) on Hover Example
Tailwind CSS Multiselect Dropdown Example
How to use dark mode toggle switch in Tailwind CSS 3
How to use @apply directive in Tailwind CSS
Tailwind CSS sticky header & fixed navbar example
Tailwind CSS Navbar UI Example
Tailwind CSS 3 Login Page UI Example
Tailwind CSS Login Modal Example
Tailwind CSS 3 Overlay Image Example
Tailwind CSS Thank You Page Example
Tailwind CSS Timeline UI Example
Tailwind CSS Responsive Footer Section Example
Tailwind CSS Background Image Header Example
