Cubite Technologies
From the blog

From the blog

Open edX theme powered by TailwindCSS

Open edX theme powered by TailwindCSS
Cubite Technologies's photo
Cubite Technologies

Published on Aug 5, 2021

2 min read

Subscribe to my newsletter and never miss my upcoming articles

Untitled (2)

Introduction

what is open edx ?

Open edX is an open-source learning management system used by many universities and organizations worldwide.

Why should I use Tailwindcss for open edx theming?

Tailwindcss is a utility-first CSS framework. New to Utility-First CSS? In short, it makes writing CSS more fun by moving things like color and spacing into function arguments rather than in separate classes. It also provides some nice features like built-in theme support, and default values for properties that change based on the element type.

TailwindCSS brings following advantages to your frontend:

  • Designing with constraints. Using inline styles, every value is a magic number. With utilities, you’re choosing styles from a predefined design system, which makes it much easier to build visually consistent UIs.
  • Responsive design. You can’t use media queries in inline styles, but you can use Tailwind’s responsive utilities to build fully responsive interfaces easily.
  • Hover, focus, and other states. Inline styles can’t target states like hover or focus, but Tailwind’s state variants make it easy to style those states with utility classes.
  • Easier to Maintain: Maintaining a utility-first CSS project turns out to be a lot easier than maintaining a large CSS codebase, simply because HTML is so much easier to maintain than CSS. Large companies like GitHub, Heroku, Kickstarter, Twitch, Segment, and more are using this approach with great success.

How to use our Theme?

First clone the theme repo in your server

mkdir /edx-themes
git clone https://github.com/cubitetech/theme -b lilac cubite-theme

Change server configuration

In /edx/etc/lms.yml change the following variables to:

ENABLE_COMPREHENSIVE_THEMING: true
DEFAULT_SITE_THEME: cubite-theme
COMPREHENSIVE_THEME_DIRS:
- /edx-themes

Compile frontend assets

In your open edx server run:

sudo -H -u edxapp bash
source /edx/app/edxapp/edxapp_env
cd /edx/app/edxapp/edx-platform
paver update_assets lms --settings=production

Restart services

After the compiling is finished successfully restart open edx services

sudo /edx/bin/supervisorctl restart all

Don't miss the news

Feel free to visit fabulous-trailblazer-4633.ck.page/b77d1d8054 and subscribe to stay up to date with the latest news and releases.

 
Share this