Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adds --no-comments option to CLI init command #558

merged 4 commits into from Sep 25, 2018


None yet
2 participants
Copy link

commented Sep 25, 2018

Fixes: #543

Different kinds of comments

--no-comments removes most comments but not all. Line comments are preserved.


What about important block comments

Currently, there are no such comments in the configuration stub but if a need for a persistent block comment arises it can be achieved like this:

  This is a very important comment

This comment has been minimized.

Copy link

commented Sep 25, 2018

Nice! Are you up for writing a couple of tests just for the stripBlockComments function that actually test string in -> string out with some example content so we have a bit more confidence vs. just checking that the output doesn't contain comment delimiters? I'm sure it works but would be nice to have for regression coverage down the road.

@adamwathan adamwathan merged commit c4c36b9 into tailwindcss:master Sep 25, 2018

1 check passed

continuous-integration/travis-ci/pr The Travis CI build passed

This comment has been minimized.

Copy link

commented Sep 25, 2018

Awesome, thanks @MattStypa!

@MattStypa MattStypa deleted the MattStypa:init-no-comments branch Sep 25, 2018

naknode added a commit to delaford/website that referenced this pull request Nov 1, 2018

Update tailwindcss to the latest version 🚀 (#13)
## The devDependency [tailwindcss]( was updated from `0.6.6` to `0.7.0`.
This version is **not covered** by your **current version range**.

If you don’t accept this pull request, your project will work just like it did before. However, you might be missing out on a bunch of new features, fixes and/or performance improvements from the dependency update.


<summary>Release Notes for v0.7.0</summary>

<li><a href="#new-features">New Features</a>
<li><a href="#registering-new-variants-from-plugins">Registering new variants from plugins</a></li>
<li><a href="#variant-order-can-be-customized-per-module">Variant order can be customized per module</a></li>
<li><a href="#added-focus-within-variant">Added <code>focus-within</code> variant</a></li>
<li><a href="#fancy-cli-updates">Fancy CLI updates</a></li>
<li><a href="#option-to-generate-config-without-comments">Option to generate config without comments</a></li>
<li><a href="#make-configured-prefix-optional-when-using-apply">Make configured prefix optional when using <code>@apply</code></a></li>
<li><a href="#improve-flexbox-behavior-in-ie">Improve Flexbox behavior in IE 10/11</a></li>
<li><a href="#changes">Changes</a>
<li><a href="#variant-order-in-modules-config-is-now-significant">Variant order in modules is now significant</a></li>
<li><a href="#normalize-updated-to-8">Normalize.css updated to v8.0.0</a></li>
<li><a href="#removed-css-fix-for-chrome-62-button-border-radius-change">Removed CSS fix for Chrome 62 button border radius change</a></li>
<p><a name="user-content-new-features"></a></p>
<h2>New Features</h2>
<p><a name="user-content-registering-new-variants-from-plugins"></a></p>
<h3>Registering new variants from plugins (<a href="" data-hovercard-type="pull_request" data-hovercard-url="/tailwindcss/tailwindcss/pull/505/hovercard">#505</a>)</h3>
<p><em>(Introduced as an experiment in <a href="">v0.6.2</a>, now promoted to an official feature)</em></p>
<p>Plugins can now add their own variants (like <code>hover</code>, <code>focus</code>, <code>group-hover</code>, etc.) to Tailwind.</p>
<p>To get started, destructure the new <code>addVariant</code> function from the object passed to your plugin, and call it with the name of the variant you'd like to add and a callback that can be used to manipulate the PostCSS nodes where the variant is being applied:</p>
<div class="highlight highlight-source-js"><pre><span class="pl-c1">module</span>.<span class="pl-smi">exports</span> <span class="pl-k">=</span> {
  plugins<span class="pl-k">:</span> [
    <span class="pl-k">function</span>({ addVariant }) {
      <span class="pl-en">addVariant</span>(<span class="pl-s"><span class="pl-pds">'</span>important<span class="pl-pds">'</span></span>, ({ container }) <span class="pl-k">=&gt;</span> {
        <span class="pl-smi">container</span>.<span class="pl-en">walkRules</span>(<span class="pl-smi">rule</span> <span class="pl-k">=&gt;</span> {
          <span class="pl-smi">rule</span>.<span class="pl-smi">selector</span> <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">`</span>.<span class="pl-cce">\\</span>!<span class="pl-s1"><span class="pl-pse">${</span><span class="pl-smi">rule</span>.<span class="pl-smi">selector</span>.<span class="pl-c1">slice</span>(<span class="pl-c1">1</span>)<span class="pl-pse">}</span></span><span class="pl-pds">`</span></span>
          <span class="pl-smi">rule</span>.<span class="pl-en">walkDecls</span>(<span class="pl-smi">decl</span> <span class="pl-k">=&gt;</span> {
            <span class="pl-smi">decl</span>.<span class="pl-smi">important</span> <span class="pl-k">=</span> <span class="pl-c1">true</span>
<p>Documentation is coming soon, but for now learn more in <a href="" data-hovercard-type="pull_request" data-hovercard-url="/tailwindcss/tailwindcss/pull/505/hovercard">the pull request</a>.</p>
<p><a name="user-content-variant-order-can-be-customized-per-module"></a></p>
<h3>Variant order can be customized per module (<a href="" data-hovercard-type="pull_request" data-hovercard-url="/tailwindcss/tailwindcss/pull/505/hovercard">#505</a>)</h3>
<p><em>(Introduced as an experiment in <a href="">v0.6.2</a>, now promoted to an official feature)</em></p>
<p>Variants are now generated in the order that they are specified in the <code>modules</code> section of your config file, rather than in a hard-coded static order like in previous versions of Tailwind.</p>
<p>That means that if you want <code>focus</code> variants to defeat <code>hover</code> variants for background colors, but you want the opposite behavior for border colors, you can actually do that now by specifying the order in your config:</p>
<div class="highlight highlight-source-js"><pre><span class="pl-smi">modules</span>.<span class="pl-smi">exports</span> <span class="pl-k">=</span> {
  <span class="pl-c"><span class="pl-c">//</span> ...</span>
  modules<span class="pl-k">:</span> {
    <span class="pl-c"><span class="pl-c">//</span> ...</span>
    backgroundColors<span class="pl-k">:</span> [<span class="pl-s"><span class="pl-pds">'</span>responsive<span class="pl-pds">'</span></span>, <span class="pl-s"><span class="pl-pds">'</span>hover<span class="pl-pds">'</span></span>, <span class="pl-s"><span class="pl-pds">'</span>focus<span class="pl-pds">'</span></span>],
    <span class="pl-c"><span class="pl-c">//</span> ...</span>
    borderColors<span class="pl-k">:</span> [<span class="pl-s"><span class="pl-pds">'</span>responsive<span class="pl-pds">'</span></span>, <span class="pl-s"><span class="pl-pds">'</span>focus<span class="pl-pds">'</span></span>, <span class="pl-s"><span class="pl-pds">'</span>hover<span class="pl-pds">'</span></span>],
    <span class="pl-c"><span class="pl-c">//</span> ...</span>
<p>Note that this doesn't affect <code>responsive</code> variants — those are a special case since responsive versions are also generated for other variants, and we group responsive declarations to optimize the resulting CSS.</p>
<p><a name="user-content-added-focus-within-variant"></a></p>
<h3>Added <code>focus-within</code> variant (<a href="" data-hovercard-type="pull_request" data-hovercard-url="/tailwindcss/tailwindcss/pull/463/hovercard">#463</a>)</h3>
<p>Tailwind now includes a <code>focus-within</code> variant that you can use to change how an element is styled if an element <em>inside</em> of it has focus.</p>
<div class="highlight highlight-text-html-basic"><pre>&lt;<span class="pl-ent">div</span> <span class="pl-e">class</span>=<span class="pl-s"><span class="pl-pds">"</span>focus-within:shadow-lg<span class="pl-pds">"</span></span>&gt;
  &lt;<span class="pl-ent">label</span>&gt;
    &lt;<span class="pl-ent">span</span>&gt;Email&lt;/<span class="pl-ent">span</span>&gt;
    &lt;<span class="pl-ent">input</span> <span class="pl-e">type</span>=<span class="pl-s"><span class="pl-pds">"</span>email<span class="pl-pds">"</span></span>&gt;
  &lt;/<span class="pl-ent">label</span>&gt;
&lt;/<span class="pl-ent">div</span>&gt;</pre></div>
<p><a href="" rel="nofollow">Learn about the <code>:focus-within</code> pseudo-class on MDN</a></p>
<p>By default we don't generate <code>focus-within</code> variants for any utilities, but you can change this in the modules section your Tailwind configuration file.</p>
<p><a name="user-content-fancy-cli-updates"></a></p>
<h3>Fancy CLI updates (<a href="" data-hovercard-type="pull_request" data-hovercard-url="/tailwindcss/tailwindcss/pull/554/hovercard">#554</a>)</h3>
<p>Tailwind 0.7.0 includes a completely rewritten CLI tool with nicer output and a better user experience.</p>
<p><a target="_blank" rel="noopener noreferrer" href=""><img src="" alt="" style="max-width:100%;"></a></p>
<p>All of the existing functionality is still there with the same API, it just looks better.</p>
<p><a name="user-content-option-to-generate-config-without-comments"></a></p>
<h3>Option to generate config without comments (<a href="" data-hovercard-type="pull_request" data-hovercard-url="/tailwindcss/tailwindcss/pull/558/hovercard">#558</a>)</h3>
<p>You can now use the <code>--no-comments</code> option when running <code>tailwind init</code> to generate a config file that excludes all of the inline documentation comments.</p>
<p>This is a great way to make your config file easier to skim if you're an experienced Tailwind user who doesn't need the comments.</p>
<p><a name="user-content-make-configured-prefix-optional-when-using-apply"></a></p>
<h3>Make configured prefix optional when using <code>@apply</code> (<a href="" data-hovercard-type="pull_request" data-hovercard-url="/tailwindcss/tailwindcss/pull/553/hovercard">#553</a>)</h3>
<p>If you're <a href="" rel="nofollow">prefixing</a> your generated utilities, including that prefix when using <code>@apply</code> is now optional.</p>
<div class="highlight highlight-source-css"><pre><span class="pl-c"><span class="pl-c">/*</span> Before <span class="pl-c">*/</span></span>
<span class="pl-e">.my-component</span> {
  @<span class="pl-c1">apply</span> <span class="pl-c1">tw-bg-blue</span> <span class="pl-c1">tw-text-white</span> <span class="pl-c1">tw-font-bold</span>;

<span class="pl-c"><span class="pl-c">/*</span> Now <span class="pl-c">*/</span></span>
<span class="pl-e">.my-component</span> {
  @<span class="pl-c1">apply</span> <span class="pl-c1">bg-blue</span> <span class="pl-c1">text-white</span> <span class="pl-c1">font-bold</span>;
<p>You can continue to use the prefix if you like, or drop it if you prefer a terser syntax.</p>
<p><a name="user-content-improve-flexbox-behavior-in-ie"></a></p>
<h3>Improve Flexbox behavior in IE 10/11 (<a href="" data-hovercard-type="pull_request" data-hovercard-url="/tailwindcss/tailwindcss/pull/550/hovercard">#550</a>)</h3>
<p>IE 10 and 11 interpret the shorthand <code>flex</code> property differently than other browsers.</p>
<p>Tailwind now specifies explicit grow, shrink, and basis values for the <code>flex-1</code>, <code>flex-auto</code>, and <code>flex-initial</code> utilities for a more consistent cross-browser experience.</p>
<p><a href="">Learn more at the flexbugs repo</a> (bugs <a href="">#4</a> and <a href="">#6</a> specifically)</p>
<p><a name="user-content-changes"></a></p>
<p><a name="user-content-variant-order-in-modules-config-is-now-significant"></a></p>
<h3>Variant order in modules config is now significant (<a href="" data-hovercard-type="pull_request" data-hovercard-url="/tailwindcss/tailwindcss/pull/505/hovercard">#505</a>)</h3>
<p><em>Impact: Low, Effort: Low</em></p>
<p>Prior to 0.7.0, variants were always generated in the same order, regardless of the order specified in the <code>modules</code> section of your config file.</p>
<p>Now, variants are generated in the they are specified. That means that if your config file currently lists variants in a different order than the &lt;=0.6.6 default variant order, those variants will appear in a different order in your CSS.</p>
<p>To preserve the &lt;=0.6.6 behavior, simply edit the <code>modules</code> section of your config file to make sure your variants are listed in the following order:</p>
<div class="highlight highlight-source-js"><pre><span class="pl-smi">modules</span>.<span class="pl-smi">exports</span> <span class="pl-k">=</span> {
  <span class="pl-c"><span class="pl-c">//</span> ...</span>
  modules<span class="pl-k">:</span> {
    <span class="pl-c"><span class="pl-c">//</span> ...</span>
    [anyModule]<span class="pl-k">:</span> [<span class="pl-s"><span class="pl-pds">'</span>group-hover<span class="pl-pds">'</span></span>, <span class="pl-s"><span class="pl-pds">'</span>hover<span class="pl-pds">'</span></span>, <span class="pl-s"><span class="pl-pds">'</span>focus-within<span class="pl-pds">'</span></span>, <span class="pl-s"><span class="pl-pds">'</span>focus<span class="pl-pds">'</span></span>, <span class="pl-s"><span class="pl-pds">'</span>active<span class="pl-pds">'</span></span>]
    <span class="pl-c"><span class="pl-c">//</span> ...</span>
<p><a name="user-content-normalize-updated-to-8"></a></p>
<h3>Normalize.css updated to v8.0.0 (<a href="" data-hovercard-type="pull_request" data-hovercard-url="/tailwindcss/tailwindcss/pull/537/hovercard">#537</a>)</h3>
<p><em>Impact: Low, Effort: Low</em></p>
<p>We've updated our dependency on <a href="">Normalize.css</a> from 7.0.0 to 8.0.0.</p>
<p>This drops support for very old browsers like IE9, Android 4.3, Safari 8, and iOS Safari 7-8.</p>
<p>If you still need to support those browsers, remove <code>@tailwind preflight</code> from your CSS, add Normalize.css 7.0.0 to your project, and manually add our <a href="">additional preflight base styles</a>.</p>
<p><a name="user-content-removed-css-fix-for-chrome-62-button-border-radius-change"></a></p>
<h3>Removed CSS fix for Chrome 62 button border radius change (<a href="" data-hovercard-type="pull_request" data-hovercard-url="/tailwindcss/tailwindcss/pull/579/hovercard">#579</a>)</h3>
<p><em>Impact: Low, Effort: Low</em></p>
<p>When Chrome 62 was released, it introduced a user agent stylesheet change that added a default border radius to all buttons.</p>
<p>This messed up styles for like half of the internet (including sites like GitHub itself), so Chrome reverted the change in Chrome 63.</p>
<p>We included a fix for this in Tailwind with the intention to remove it when Chrome 62 was no longer in common use. Now that usage has dropped to 0.09%, we've removed our fix.</p>
<p>If this is a problem for you <em>(it isn't)</em>, you can add <a href="">the removed styles</a> back to your project right after <code>@tailwind preflight</code>.</p>

<p>The new version differs by 60 commits ahead by 60, behind by 2.</p>
<li><a href=""><code>4f5ad90</code></a> <code>0.7.0</code></li>
<li><a href=""><code>1e8a70b</code></a> <code>Promote pluginVariants from experiment to feature</code></li>
<li><a href=""><code>58f10b6</code></a> <code>Update lockfile</code></li>
<li><a href=""><code>35f8dd6</code></a> <code>Merge pull request #579 from Ambyjkl/master</code></li>
<li><a href=""><code>331454f</code></a> <code>Undo CSS override for Chrome 62</code></li>
<li><a href=""><code>7120a89</code></a> <code>Merge pull request #576 from motleydev/master</code></li>
<li><a href=""><code>55f8207</code></a> <code>Fix apostrophe in error</code></li>
<li><a href=""><code>335c1b1</code></a> <code>Merge pull request #573 from willemvb/patch-1</code></li>
<li><a href=""><code>8dab134</code></a> <code>Update defaultConfig.stub.js</code></li>
<li><a href=""><code>7c9029a</code></a> <code>Update Slack invite link</code></li>
<li><a href=""><code>c4c36b9</code></a> <code>Merge pull request #558 from MattStypa/init-no-comments</code></li>
<li><a href=""><code>34ad504</code></a> <code>Added tests for CLI utils</code></li>
<li><a href=""><code>dbeeea4</code></a> <code>Added ability to protect comments when --no-comments options is use for CLI init command</code></li>
<li><a href=""><code>48387a8</code></a> <code>Switched to use strip-comments instead of Babel for CLI init command</code></li>
<li><a href=""><code>9e26fd8</code></a> <code>CLI. Added --no-comments option to init commend</code></li>
<p>There are 60 commits in total.</p>
<p>See the <a href="">full diff</a></p>

  <summary>FAQ and help</summary>

  There is a collection of [frequently asked questions]( If those don’t help, you can always [ask the humans behind Greenkeeper](


Your [Greenkeeper]( bot 🌴
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.