1. Frameworks
  2. Astro

Installation

Install Preline UI with Astro using Tailwind CSS

Setting up Preline UI in a Astro project using Tailwind CSS.

Quick Astro setup

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.

Preline UI + Astro

  1. Install Preline UI

    Install preline via npm or yarn. 

    // Terminal or Shellnpm install preline // or yarn add preline

  2. Configure Preline UI JavaScript paths

    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,  ],}

  3. Add the Preline UI JavaScript

    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>