Working with our themes

Dependencies We use npm to handle dependencies. All you have to do is run the following, and all deps will be installed:

npm install

Editing

  • Before editing you must run the following
npm run dev
  • This allows the Tailwind CSS JIT engine to watch for changes in your html, and so the css is built in real time. More info on the JIT engine can be found here.

  • The directory structure is as follows

.
├── package.json
├── package-lock.json
├── postcss.config.js
├── README.md
├── tailwind.css
└── public/
    ├── *.html (all html files)
    └── assets/
        ├── css
        ├── images
        └── js
  • You should edit HTML in the public folder. However, don't edit css files in the public directory, because these are generated, and your changes will not be reflected when you rebuilt them. However, feel free to add your own css files.
  • The tailwind.css file contains the src css that will be built. The postcss.config.js and the tailwind.config.js contains the neccessary configurations needed to build the css using Tailwind CSS. Feel free to edit these as you see fit.

Building for production

When you are ready to build the css for production, you should run the following:

npm run build

This will generate the css in the public folder. You can then upload this to your hosting server.

💡

Note that we cannot give guidance on how to upload to your own server, however, it should be pretty straightforward.