Siteglide.comAdminRoadmap

Example Tailwind Project Setup

Example setup for Tailwind Projects. We will update this when a new version is released. The module itself will only update new sites, not existing sites when there is a breaking change.

About

We ship a folder named open_me_to_setup_tailwind_first_time to distribute our recommended template for setting up Tailwind on a new site, however, to avoid causing conflict issues, we don't update this in the Site itself when you update the module. Instead, we will add examples of our recommended configuration here.

Configuration Version Control

We recommend you update the open_me_to_setup_tailwind_first_time folder at the same time as you make changes to the configuration on your site, or use Github to track your changes. This is so other developers, or yourself on a different machine load the same configuration as you and build Tailwind in a consistent way!

Troubleshooting and Customising

Note, for this configuration to work, you may need to run npm i to install node module dependencies and siteglide-cli pull to fetch dependencies like presets. If you already use npm on your project, do not copy the package and package-lock files and instead install the dev dependencies and scripts used in package.json manually.

Example Setup

/** @type {import('tailwindcss').Config} */

const defaultTheme = require('tailwindcss/defaultTheme');
const colors = require('tailwindcss/colors')
/* Run watch command: ```json
npx tailwindcss -c ./admin_tailwind.config.js -i ./tailwind_src/admin.css -o ./modules/module_86/private/assets/css/tailwind-admin.min.css --watch --minify
``` */

module.exports = {
  //Pointing at sitebuilder_preset_settings will apply the changes from SiteBuilder settings. If you don't want to use these preset settings, you can remove this preset, or overwrite individual settings in theme.
  presets: [
    require('tailwindcss/../../modules/module_86/public/assets/css/presets/sitebuilder_preset_settings')
  ],
  content: [
    "./marketplace_builder/**/*.{html,js,min.js,liquid}",
    "./modules/**/*.{html,js,min.js,liquid}",
    "./node_modules/flowbite/**/*.js"
  ],
  //See an example with all of the default Tailwind settings here: https://github.com/tailwindlabs/tailwindcss/blob/main/stubs/config.full.js
  //SiteBuilder presets will also extend by creating new colours: primary, secondary, accent, info, success, danger, warning.
  theme: {
    extend: {
      
    }
  },
  plugins: [
    require('flowbite/../../modules/module_86/public/assets/css/presets/flowbite_plugin_fork_colors_disabled'),
    require('flowbite-typography')
  ],
  darkMode: 'class',
  safelist: []
}

PreviousTheme PresetsNextLayouts

Last updated

Was this helpful?