Skip to content

Commit ca38307

Browse files
committed
Adds support for Tailwind preflight:false
1 parent 0032bfa commit ca38307

File tree

5 files changed

+76
-2
lines changed

5 files changed

+76
-2
lines changed

docs/components/tailwind/tailwind.mdx

+46
Original file line numberDiff line numberDiff line change
@@ -102,3 +102,49 @@ body {
102102
</CodeBlock>
103103
</CodeBlocks></div>
104104

105+
#### Disable Preflight
106+
107+
You can disable the Tailwind Preflight CSS.
108+
109+
<Frame background="subtle"><img src="../../images/previews/tailwind-33b7c4e5/document.1.jpg" style={{ width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
110+
111+
<div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeBlocks>
112+
<CodeBlock title="template.tsx">
113+
```jsx
114+
import { Tailwind } from "@fileforge/react-print";
115+
116+
<Tailwind
117+
config={{
118+
corePlugins: {
119+
preflight: false,
120+
},
121+
}}
122+
>
123+
<div className="bg-primary p-12 rounded-2xl"></div>
124+
<h1>Level 1 Header</h1>
125+
<p className="text-slate-800">
126+
This is a Tailwind component. All children of this component will have
127+
access to the Tailwind CSS classes.
128+
</p>
129+
</Tailwind>;
130+
131+
```
132+
</CodeBlock>
133+
<CodeBlock title="styles.css">
134+
```css
135+
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");
136+
137+
html,
138+
body {
139+
font-size: 28px;
140+
font-family: "Inter", sans-serif;
141+
}
142+
143+
@page {
144+
size: A4;
145+
}
146+
147+
```
148+
</CodeBlock>
149+
</CodeBlocks></div>
150+
Loading
Binary file not shown.

docs/sortedDocs.json

+1-1
Large diffs are not rendered by default.

src/tailwind/tailwind.tsx

+29-1
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,14 @@ export const Tailwind = ({
5050
},
5151
};
5252

53+
let showPreflight = true;
54+
55+
if (corePlugins && Array.isArray(corePlugins)) {
56+
showPreflight = corePlugins.includes("preflight");
57+
} else if (corePlugins && typeof corePlugins === "object") {
58+
showPreflight = corePlugins.preflight === false ? false : true;
59+
}
60+
5361
const { css } = postcss([
5462
createTailwindcssPlugin({
5563
tailwindConfig,
@@ -64,7 +72,7 @@ export const Tailwind = ({
6472
@tailwind components;
6573
@tailwind utilities;
6674
67-
${preflightCss}
75+
${showPreflight ? preflightCss : ""}
6876
`,
6977
{
7078
from: undefined,
@@ -129,6 +137,26 @@ The supported Tailwind version is 3.3.2 due to changes in the PostCSS plugin syn
129137
</Tailwind>
130138
),
131139
},
140+
preflight: {
141+
name: "Disable Preflight",
142+
description: "You can disable the Tailwind Preflight CSS.",
143+
template: (
144+
<Tailwind
145+
config={{
146+
corePlugins: {
147+
preflight: false,
148+
},
149+
}}
150+
>
151+
<div className="bg-primary p-12 rounded-2xl"></div>
152+
<h1>Level 1 Header</h1>
153+
<p className="text-slate-800">
154+
This is a Tailwind component. All children of this component
155+
will have access to the Tailwind CSS classes.
156+
</p>
157+
</Tailwind>
158+
),
159+
},
132160
},
133161
},
134162
},

0 commit comments

Comments
 (0)