Installation
Setting up Preline UI in a Astro project using Tailwind CSS.
Astro is the all-in-one web framework designed for speed. If you haven't set up Tailwind CSS yet, check out Astro Tailwind CSS installation guides.
Install preline
via npm or yarn.
// Terminal or Shellnpm install preline // or yarn add preline
Add the path to Preline UI JavaScript files in your tailwind.config.js
file.
// tailwind.config.js import preline from 'preline/plugin.js',export default { content: [ './public/**/*.astro', './src/**/*.{astro,js,jsx,ts,tsx,vue}', 'node_modules/preline/dist/*.js', ], plugins: [ preline, ],}
Include the JavaScript <script>
that powers the interactive elements near the end of your <body>
tag:
// Layout.astro<script is:inline src="./node_modules/preline/dist/preline.js"></script>