Riztail - A Tailwind Bludit Theme

Made with Gulp with TailwindCSS v3 Starter Kit with some modification and package update. Still working in progress. Any question? ask me : instagram.com/rizqijune

Features - Theme

• Plugin integrated (Soon..)
• Template support
• Dark Mode support
• Slider featured post
• Shop support using category (Display only)
• Responsive (Mobile first)
• No kernel editing

Features - Dev

• Easy configuration using config.js
• Live reload on file/assets changes using browser-sync
• SCSS support
• Alpine.JS (Hardcode)
• Minification of styles and scripts on production build
• Minification of images on production build using imagemin
• Includes following tailwindcss plugins (can be disabled/enabled with config.js)
  • @tailwindcss/forms
  • @tailwindcss/typography
  • @tailwindcss/container-queries

---

Quick Start

You can get started by clicking on Use this template for creating new repo using this template or simply by cloning it.

• Build with Volta Node manager
• Node@21.5.0
• Yarn@4.0.2

You can use pnpm instead of yarn. npm is not recomended.

Install dev dependencies

yarn // or pnpm install

Start development server with live preview

yarn dev // or pnpm dev

Generate build files for production server

yarn build // or pnpm build

All dev files are present in dev folder. The build version can be found in build folder after running yarn build command.

Configuration

All configurations are found in config.js file in the root directory. You can configure browser default port, enable/disable plugins by simply updating boolean values (Default is set to true) and many more.

const config = {
  tailwindjs: "./tailwind.config.js",
  port: 9050, // default port
  // purgecss options
  purgecss: {
    content: ["src/**/*.{html,js,php}"],
    ...
  },
  // imagemin options for image optimizations
  imagemin: {
    png: [0.7, 0.7], // range between min (0) and max (1) as quality - 70% with current values for png images,
    jpeg: 70, // % of compression for jpg, jpeg images
  },
};

// tailwind plugins
const plugins = {
  typography: true, // set to false to disable
  forms: true,
  containerQueries: true,
};
...

Todo

• Live Preview
• Lazy load or get rid of needing for image (Dynamic SVG)
• Auto copy build to bl-theme in prod command
• Remove comment in prod
• Make it more responsive
• Easy personalized with config
• Native shop support or external shop (snipcart)
• Compare product (display only)
• Use API instead of manual insert php code (Bludit 4x stable*)
• Reactjs (Bludit 4x stable*)
• Refactor code

Bug

• Won't work with external cover image.

Made with

• Components from Starter Dashboard Layout
• Template from Gulp With TailwindCSS Starter Kit
• Bludit 3.15.0

Donation

Location	Gateway	Address	Reward
Global	Near	rizqijune.tg	Soon..
Global	Binance Pay	188663740	Soon..
Global	EVM	Soon..	Soon..
Indonesia	Gopay, OVO	08992969966	Soon..

License

This project is open source and available under the MIT License.