A simple, and documented, Drupal demo theme using TailwindCSS + Storybook
This demo depends on ddev
, and was developed on ddev-1.18.1
.
# Set up ddev for this project
$ ddev start
# Install composer dependencies
$ ddev composer install
# Install and configure the site
$ ddev composer install:site
# Install theme dependencies
$ ddev composer install:theme
# Set our theme as default
$ ddev composer setup:theme
# Generate theme files
$ ddev composer build:theme
# Get a one time login link
$ ddev drush user:login
You should now have a working demo at http://twsb-demo.ddev.site/
To have the theme CSS regenerate on the fly:
# Enable theme debugging (optional)
$ ddev composer setup:debug
# Build theme files, and watch theme for changes
# Run this instead of build:theme
$ ddev composer dev:theme
This will run yarn
inside the ddev
container, as necessary. Changes
to the templates, or CSS in css/
will reflect on your Drupal site as
long as your are logged in, and have enabled debugging (see
setup:debug
).
- This theme works by generating a CSS file in
(theme-root)/dist/twsb.css
, which is based on the user editable CSS available in(theme-root)/css/twsb.css
- By default, Tailwind CSS includes everything in the produced CSS,
but a minified version is available for production use when run with
NODE_ENV=production
(seedist
command in(theme-root)/package.json
) - Also note that
dev:theme
uses--poll
to watch for changes becauseinotify
does not work correctly on NFS mounted files inside Docker
If in doubt, you can see the commands in (repo-root)/composer.json
and
(theme-root)/package.json
, their respective script
sections
illustrate what happens behind the scenes when running the commands
mentioned in this README.