Comments (3)
You might need to let Tailwind know about your partial so it can scan it for classes to generate:
https://tailwindcss.com/docs/content-configuration
from framework.
Hmm, I think the issues is not about tailwindcss but about the css classes inliner 🤔
Input:
<tr>
<td>
<table align="center" class="email-footer w-570 mx-auto text-center sm:w-full">
<tr>
<td align="center" class="content-cell p-45 text-base">
<raw>
{% set copyright = 'copyright'|trans({}, 'email') %}
{% if copyright != 'copyright' %}
<p class="mt-6 mb-20 text-xs leading-24 text-center text-gray-postmark-light">
{{ copyright | nl2br }}</p>
{% endif %}
{% set footer_reason = 'footer_reason'|trans({}, 'email') %}
{% if footer_reason != 'footer_reason' %}
<p class="mt-6 mb-20 text-xs leading-24 text-center text-gray-postmark-light">
{{ footer_reason | nl2br }}</p>
{% endif %}
{% if notificationLink|default %}
<p class="mt-6 mb-20 text-xs leading-24 text-center text-gray-postmark-light">
<a class="text-gray-postmark-light font-medium no-underline hover:underline"
href="{{ notificationLink }}">Benachrichtigungseinstellungen</a>
</p>
{% endif %}
</raw>
</td>
</tr>
</table>
</td>
</tr>
Config
module.exports = {
build: {
templates: {
source: 'src/templates',
filetypes: 'twig',
assets: {
source: 'src/assets/images',
destination: 'images',
},
destination: {
path: '../templates/email',
extension: 'twig'
},
},
tailwind: {
css: 'src/assets/css/main.css',
},
},
inlineCSS: {
enabled: true,
},
prettify: {
enabled: true,
},
removeUnusedCSS: {
enabled: true,
},
}
Output
<tr>
<td>
<table align="center" class="email-footer w-570 mx-auto text-center sm-w-full" cellpadding="0" cellspacing="0" role="none">
<tr>
<td align="center" class="content-cell p-45 text-base"> {% set copyright = 'copyright'|trans({}, 'email') %}
{% if copyright != 'copyright' %}
<p class="mt-6 mb-20 text-xs leading-24 text-center text-gray-postmark-light">
{{ copyright | nl2br }}
</p>
{% endif %}
{% set footer_reason = 'footer_reason'|trans({}, 'email') %}
{% if footer_reason != 'footer_reason' %}
<p class="mt-6 mb-20 text-xs leading-24 text-center text-gray-postmark-light">
{{ footer_reason | nl2br }}
</p>
{% endif %}
{% if notificationLink|default %}
<p class="mt-6 mb-20 text-xs leading-24 text-center text-gray-postmark-light">
<a class="text-gray-postmark-light font-medium no-underline hover-underline" href="{{ notificationLink }}">Benachrichtigungseinstellungen</a>
</p>
{% endif %}
</td>
</tr>
</table>
</td>
</tr>
Expected output
Inlined css lile style="font-family: 'Segoe UI', sans-serif; mso-line-height-rule: exactly;"
For non-partial templates, it works just fine 😀
from framework.
Is that HTML in a template or a component file?
A repo reproducing the issue/setup you have would help 👍
from framework.
Related Issues (20)
- Image optimization HOT 1
- <if condition ignores '@' escape for {{ }} code HOT 2
- Minor issues with config types on v5 beta10 HOT 9
- Issue using v5 beta10 on Netlify serverless HOT 2
- Transformer "removeUnusedCSS" add unwanted line break in large build file HOT 3
- Webstorm support HOT 1
- Google font
- 5.x: content sources are incorrectly output to the build output path
- 5.x: images added to watched paths after dev server start are not served
- 5.x: add types for `config.build.current`
- 5.x: received empty string in local dev
- 5.x: watch .cjs configs
- 5.x: better index page HOT 1
- `ReferenceError: ReadableStream is not defined` after fresh install HOT 4
- Escapes & in Templates and Components HOT 4
- Error when integrating into existing monorepo HOT 4
- exported `markdown` function is async, but doesn't return a `Promise` in function signature HOT 3
- Preview in the browser does not get updated even after beforeCreate is being called HOT 3
- Type definition propagate "plaintext" while in fact "generatePlaintext" exported HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from framework.