Custom Drupal 11 theme based on Tailwind CSS Starter Kit 5.0.0-alpha4 and can be used as basic theme for tailwind based themes.
- Node.js (v16 or higher)
- npm or yarn
- DDEV (optional, but recommended)
cd web/themes/custom/nothing
npm installOr using the script:
./scripts/install.shchmod +x scripts/*.shnpm run buildOr:
./scripts/build.sh# Option 1: via npm
npm install
# Option 2: via script
./scripts/install.shThe script automatically detects the environment (DDEV or local).
# Option 1: via npm
npm run build
# Option 2: via script
./scripts/build.shCreates a minified CSS file in css/style.css.
# Option 1: via npm
npm run dev
# Option 2: via script
./scripts/watch.shCSS will automatically rebuild when files in templates/ and src/css/ change.
Recommendation: Keep this command running in a separate terminal tab during development.
npm run prodCreates an optimized CSS version with minimal file size.
Edit src/css/input.css:
@tailwind base;
@tailwind components;
@tailwind utilities;
/* Your custom styles here */
.custom-class {
@apply bg-blue-500 text-white p-4 rounded-lg;
}Edit tailwind.config.js to add custom colors, fonts, etc.:
module.exports = {
content: [
'./templates/**/*.html.twig',
'./src/**/*.{js,jsx,ts,tsx}',
],
theme: {
extend: {
colors: {
'brand-blue': '#1e40af',
'brand-red': '#dc2626',
},
},
},
plugins: [],
}Scripts automatically detect if DDEV is running and execute commands accordingly.
# Commands execute inside the container
./scripts/build.sh
./scripts/watch.sh# Commands execute locally
./scripts/build.sh
./scripts/watch.shYou can also use DDEV directly:
# Build
ddev exec "cd web/themes/custom/nothing && npm run build"
# Watch mode
ddev exec "cd web/themes/custom/nothing && npm run dev"
# Install dependencies
ddev exec "cd web/themes/custom/nothing && npm install"Create file templates/content/node--[content-type].html.twig:
<article{{ attributes.addClass('node', 'bg-white', 'rounded-lg', 'shadow-md', 'p-6') }}>
<h2{{ title_attributes.addClass('text-3xl', 'font-bold', 'mb-4') }}>
{{ label }}
</h2>
<div{{ content_attributes.addClass('prose', 'max-w-none') }}>
{{ content }}
</div>
</article>Clear Drupal cache:
# With DDEV
ddev drush cr
# Without DDEV
drush crMake them executable:
chmod +x scripts/*.sh- Check that watch mode is running
- Clear Drupal cache:
ddev drush cr - Rebuild CSS:
npm run build
Reinstall dependencies:
rm -rf node_modules package-lock.json
npm installCheck .gitignore:
node_modules/
package-lock.json
css/style.css
css/style.css.map
*.log
node_modules/npm dependenciespackage-lock.jsonlock filecss/style.csscompiled CSScss/style.css.mapsource map*.loglog files
These files are already added to .gitignore.
Before deploying to production:
-
Build production CSS:
npm run prod
-
Commit the compiled
css/style.css -
Enable theme on the server:
drush theme:enable nothing drush config-set system.theme default nothing drush cr
- Use
npm run dev(watch mode) during development - Clear Drupal cache after changing templates
- Use Tailwind utility classes instead of custom CSS
- Check compiled CSS file size
MIT
Pavel Kasianov
Questions? Create an issue in the project repository.