tailwindlabs / tailwindcss.com Goto Github PK

Inside the migration guide Item 13 asks users to add inline to their replace elements when they want them to be display: block. Should probably be display: inline.

- 13. Add `inline` to any replaced elements (`img`, `video`, etc.) that should be `display: block`
+ 13. Add `inline` to any replaced elements (`img`, `video`, etc.) that should be `display: inline`

Can open a PR for this tomorrow-ish. Feel free to assign me this issue if you want me to do so.

At least in the v1 docs, this line:

So if you want focus utilities to take priority over hover utilities for example, make sure focus comes before hover in the list:

Contradicts the CSS snippet right after it:

/* Input */
@variants hover, focus {
  .banana {
    color: yellow;
  }
}

/* Output */
.banana {
  color: yellow;
}
.hover\:banana:hover {
  color: yellow;
}
.focus\:banana:focus {
  color: yellow;
}

Link

I’m no CSS expert so I hope I’m not wasting someone’s time here. Shouldn’t it say after instead of before?

Hmm... maybe I'm missing something, but this example doesn't really work:

addVariant('first-child', ({ modifySelectors, separator }) => {
    modifySelectors(({ className }) => {
      return `.first-child${separator}${className}:first-child`
    })
  })

Here's what it generates if I add the 'first-child' variant to the borderWidth module:

.first-child\:border-0:first-child {
  border-width: 0;
}

.first-child\:border-1:first-child {
  border-width: 1px;
}

/* and so on */

The only way this works is if the markup looks like this, because :first-child applies the first sibling that has the selector preceding it:

<div>
  <div class="border-1 first-child:border-0">
  <div class="border-1 first-child:border-0">
  <div class="border-1 first-child:border-0">
</div>

Is that really the intended usage of the example? Maybe you meant something like this, which seems more natural:

<div class="first-child:border-0">
  <div class="border-1">
  <div class="border-1">
  <div class="border-1">
</div>

For that usage to work, the code has to be:

  addVariant('first-child', ({ modifySelectors, separator }) => {
    modifySelectors(({ className }) => {
      return `.first-child${separator}${className} > *:first-child`
    })
  })

which generates:

.first-child\:border-0 > *.first-child {
  border-width: 0;
}

which I believe is the intended result.

I copied my offline docs from my windows 10 pc then I want to see it in my linux machine ? But I get this error : every time i do

$ npm run dev 

I get a

sh: /home/aebr/offline_docs/tailwindcss docs/docs/node_modules/.bin/cross-env: Permission denied error

just like this

With regards to that, I made the basic fix, I found in the internet and remove the node_modules

rm -rf node_modules

rm package-lock.json yarn.lock

npm cache clear --force

npm install

but then now I get this :

/bin/sh: vendor/bin/jigsaw: Permission denied

I was earlier going to give a tailwindcss a go. For my part i was going to use it with Angular Universal Starterkit (Angular v7). I saw that many people (including me) had a bit hard to make it work.

In the end i succeded to get it up and running through Tailwindcss Instructions and with two other dependencies. I would like to share this knowledge with others through your documentation. So even more people in the community can use it with Angular 7 and Angular Universal. Will it be alright if i add it to the documentation?

EDIT: I saw this ticket tailwindlabs/tailwindcss#481 and you can actually get it to work through Postcss. Plus ng-tailwind is not needed at all as dependicy, what you need is actually something that allows you to edit webpack without ejecting.

See the focus uppercase example here: https://next.tailwindcss.com/docs/text-style

I think it'd be a good idea to add a link to that font-smoothing post you shared on tailwindlabs/tailwindcss#702 so people can better understand how it actually works.

http://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/

Hey 👋

Could you add a license file (or some other hint about the applicable license) for the documentation?

I guess it's MIT as Tailwind itself, right?

I've tried to install the docs locally, but when i run npm run dev i got:
'.' is not recognized as an internal or external command, ,
I'm on windows 10 64bits
i got the latest npm version 5.8.0
thanks

While setting up Purgecss in my app, I noticed the docs say to install PurgeCSS that way:

# Using npm
npm install @fullhuman/postcss-purgecss

# Using yarn
yarn add @fullhuman/postcss-purgecss

If I'm not mistaken, PostCSS is part of the build process, so installing that dependency should be located in the devDependencies 🙂:

# Using npm
npm install --save-dev @fullhuman/postcss-purgecss

# Using yarn
yarn add --dev @fullhuman/postcss-purgecss

According to tailwindlabs/tailwindcss#591, the class .appearance-none does not work for IE10+.

I think it would be great to mention this in the relevant documentation page, with a link to https://stackoverflow.com/a/18878556 and a suggestion to add the following CSS (and mention that this does not work with @apply):

.appearance-none::-ms-expand {
    display: none;
}

(Sorry that I don't do a PR; I'm not sure I understand the formatting of the documentation)

I suggest that on the https://tailwindcss.com/docs/colors a simple example of how to use the colors might be helpful to new users.

Also an example of a basic page with a header with simple content, sidebar, footer would also be nice.

Today, I installed Tailwind on a project using Webpacker (Ruby gem wrapping Webpack to work with Ruby on Rails). Webpacker uses PostCSS by default but it relies on .postcssrc.yml instead of postcss.config.js. It's not apparent how to apply the instructions to another format. The information is not impossible to find (e.g. in this issue in another context) but I think it would be useful to mention it explicitly in the installation instructions.

My question is, if such a section would be welcome and where to place it? I'd go after Laravel Mix.

With tailwind's rather large amount of options, I often find it difficult to know where items are in the contents.

In my CSS I order from layout-in. I think the practice is fairly well-known?

It would be cool if Tailwind followed this so you knew where a style might be relative to where you are.

Additionally, maybe an extra level of headings too?

Screenshot attached.

Cheers :)

You may want to mention in your 1.0 upgrade guide that all color names have changed. In the examples throughout the docs, colors are using the non-numeric-suffixed-old-legacy-name.

Its not until https://tailwindcss.com/docs/customizing-colors/#naming-your-colors

that we finally find out why all of our colors are missing.

A friendly reminder to create a PR to nuxt docs when 1.0.0 is released: https://nuxtjs.org/faq/postcss-plugins/#traditional-method

It would be good if there were an example in the docs on how to use PurgeCSS in webpack JUST to purge tailwind and not the rest of your bundle.

The reason why this is important is because PurgeCSS may end up getting rid of all your node_modules and other @import stuff in your bundle. For this reason, I would recommend to use an actual webpack loader such as https://github.com/americanexpress/purgecss-loader to JUST operate on the tailwind bundle - that way it keeps your existing styles, third party stuff in node_modules intact.

Here's how I've managed to do it:

const fg = require('fast-glob')

class TailwindExtractor {
  static extract(content) {
    return content.match(/[A-Za-z0-9-_:\/]+/g) || [];
  }
}

const purgeCssPaths = fg.sync([
    'views/**/*.blade.php',
    'js/**/*.js',
    'js/**/*.vue',
    '!**/node_modules'
]);

module: {
  rules: [
    {
      test: /tailwind.css$/,
        use: ExtractTextPlugin.extract({
          fallback: styleLoader,
          use: [
            {
              loader: 'css-loader',
                options: {
                  importLoaders: 1,
                  minimize: prod,
                  sourceMap: sourcemap
                }
            },
            {
              loader: '@americanexpress/purgecss-loader',
              options: {
                paths: purgeCssPaths,
                extractors: [
                {
                  extractor: TailwindExtractor,
                    extensions: ["html", "js", "php", "vue"]
                  }
                ]
              },
          },
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: sourcemap
            }
          }
        ]
      })
    },
  ]
}

(this is for webpack 3, I'm not sure what the convention would be for webpack 4)

I was wondering how I could get the template used for the documentation to use on my own stuff.
What it it's license too?

I'm mainly referring to the Look and Feel (ie. css etc) that Jigsaw uses.

👋 Hey @adamwathan congratulations one more time for this framework!

I love this, but It would be nice to have more components something like this https://getuikit.com/docs/introduction ( components )

We are a lot of people here, near 11k stars, could be nice open a "official" component page , so we can make PR for this one.

I can help with this, and sure that many more people too.

It is an option ? thanks!

Those using vue-cli 3 or Vue UI will most likely install Tailwind through this plugin:

https://github.com/ky-is/vue-cli-plugin-tailwind

It would be good to put that in the Installation section of the docs.

First of all thanks for this great work.

I was trying to reach the website and read the Doc. But it doesn't work.
I get these familiar error messages:
This site can’t be reached.
tailwindcss.com took too long to respond.

It works when I use Tor but it's slow. So it seems my IP or perhaps IPs from my country (Iran) is kind of blocked. Yet I couldn't understand why this could be the case.

P.S. I know lots of websites have blocked us.

In this section of upgrade guide it says to add text-blue class to links, but there's no text-blue class anymore, just text-blue-{number}.

Hi Adam,

I've noticed an issue in Firefox when attempting to select the content of a <pre> when there is an h2 or h3 immediately afterwards. It makes it pretty challenging to copy and paste out of the code samples.

The selection would include the heading below, even though I'm nowhere near it. After digging in, this started to make sense:

I've narrowed it down to this chunk of less:

  // Ridiculous scroll offset trash
  > h2::before, > h3::before {
    display: block;
    height: 6rem;
    margin-top: -6rem;
    visibility: hidden;
    content: "";
  }

I tried hacking this a number of ways, but didn't have much luck in resolving the issue. I thought maybe user-select: none; might solve it, but no dice.

It's still possible to make the selection, it just requires a lot of precision. I was thinking it might be simplest to have a 'copy to clipboard' button as a potential workaround. Let me know if you think this is worth pursuing.

Yesterday, while I was browsing the docs, I found out that I'm not really good at deducing colors based on their hex notation. So, I thought that an ouput column would come in handy everytime you may want (or need) to use the default palette.

I guess that the same column could be implemented in the text-color table in a similar fashion.

I would be very fond of opening a pull request if you think it's useful!

I notice the docs you recommend to only run PurgeCSS during production builds - although this advice seems sound, it's actually a bit risky because you may end up having totally different functionality in development than in production.

If you strip out unused css in development - you'll get instant feedback whether your PurgeCSS rules are working correctly and it'll give you 100% confidence it'll work in production. But if PurgeCSS strips out the wrong css after-the-fact then you'll get a bit of a headache working out why it's broken in production but worked perfectly fine locally.

Just a few things to consider, anyway.

I personally haven't found the right solution either, but to me it makes sense to purge in all environments to avoid deploying potentially broken code. It would be nice if there was a way to cache/speed up PurgeCSS, maybe cache-loader can help.

I noticed when I went to the Flex Wrap section of the docs, that both the Flex Wrap and Flex items are visually highlighted in the sidebar content listing. They are not adjacent items, so it's not because they're both in view. It seems to happen on docs for anything that starts with 'Flex' (e.g. 'Flex Direction', 'Flex Grow'). Other items could be affected.

Maybe it's because the check for if a page is active is using starts_with?
https://github.com/tailwindcss/docs/blob/0dfd9645b2f4c0c4e7c643a6aa6cf0c4a4be4156/config.php#L30

Also, I'm not sure if it's necessary to make an array for a page and loop through it in that function.
Seems unnecessary, but maybe collect() does something more than it appears.

The current documentation provides a template for styles.css [0].
This template has @tailwind components; before @tailwind utilities;, which prevents the center: true from working (in my test and in tailwindlabs/tailwindcss#446 ).

Should this template be changed so the order of utilities and components is switched?

[0]

/**
 * This injects Tailwind's base styles, which is a combination of
 * Normalize.css and some additional base styles.
 *
 * You can see the styles here:
 * https://github.com/tailwindcss/tailwindcss/blob/master/css/preflight.css
 *
 * If using `postcss-import`, use this import instead:
 *
 * @import "tailwindcss/preflight";
 */
@tailwind preflight;

/**
 * This injects any component classes registered by plugins.
 *
 * If using `postcss-import`, use this import instead:
 *
 * @import "tailwindcss/components";
 */
@tailwind components;

/**
 * Here you would add any of your custom component classes; stuff that you'd
 * want loaded *before* the utilities so that the utilities could still
 * override them.
 *
 * Example:
 *
 * .btn { ... }
 * .form-input { ... }
 *
 * Or if using a preprocessor or `postcss-import`:
 *
 * @import "components/buttons";
 * @import "components/forms";
 */

/**
 * This injects all of Tailwind's utility classes, generated based on your
 * config file.
 *
 * If using `postcss-import`, use this import instead:
 *
 * @import "tailwindcss/utilities";
 */
@tailwind utilities;

/**
 * Here you would add any custom utilities you need that don't come out of the
 * box with Tailwind.
 *
 * Example :
 *
 * .bg-pattern-graph-paper { ... }
 * .skew-45 { ... }
 *
 * Or if using a preprocessor or `postcss-import`:
 *
 * @import "utilities/background-patterns";
 * @import "utilities/skew-transforms";
 */

I want to update Controlling File Size. Build sizes, the number of colours, screens, and the documentation examples are outdated.

I spent way too long making a tool to analyse tailwind build sizes for different configs: https://github.com/davecalnan/measure-tailwindcss-build-size

It calculates an output like:

┌───────────────────┬──────────┬──────────┬─────────┬─────────┬──────────────┐
│ Config            │ Original │ Minified │ Gzipped │ Classes │ Declarations │
├───────────────────┼──────────┼──────────┼─────────┼─────────┼──────────────┤
│ default.config.js │ 472.5K   │ 347.7K   │ 58.1K   │ 8271    │ 8336         │
├───────────────────┼──────────┼──────────┼─────────┼─────────┼──────────────┤
│ extend.config.js  │ 474.9K   │ 349.4K   │ 58.5K   │ 8316    │ 8381         │
├───────────────────┼──────────┼──────────┼─────────┼─────────┼──────────────┤
│ replace.config.js │ 224.0K   │ 155.0K   │ 21.9K   │ 4131    │ 4196         │
└───────────────────┴──────────┴──────────┴─────────┴─────────┴──────────────┘

I'm going to create a pull request with the relevant updates to the page.

Unfortunately I'm getting a similar issue. Updated node and NPM to latest version. This is my log:

0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/Cellar/node/9.11.1/bin/node',
1 verbose cli '/usr/local/bin/npm',
1 verbose cli 'run',
1 verbose cli 'development' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'predevelopment', 'development', 'postdevelopment' ]
5 info lifecycle @~predevelopment: @
6 info lifecycle @~development: @
7 verbose lifecycle @~development: unsafe-perm in lifecycle true
8 verbose lifecycle @~development: PATH: /usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/Users/bart/Code/docs/tailwindcss/node_modules/.bin:/Users/bart/Code/docs/tailwindcss/node_modules/.bin:/Users/bart/.config/yarn/link/node_modules/.bin:/Users/bart/Code/docs/tailwindcss/node_modules/.bin:/Users/bart/.config/yarn/link/node_modules/.bin:/usr/local/lib/node_modules/yarn/updates/0.17.10/bin/node-gyp-bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/mysql/bin:/Users/bart/.composer/vendor/bin:./vendor/bin:/Users/bart/Code/spark-installer:/usr/bin:/bin:/usr/sbin:/sbin
9 verbose lifecycle @~development: CWD: /Users/bart/Code/docs/tailwindcss
10 silly lifecycle @~development: Args: [ '-c',
10 silly lifecycle 'cross-env NODE_ENV=development webpack --progress --hide-modules --env=local --config=node_modules/laravel-mix/setup/webpack.config.js' ]
11 silly lifecycle @~development: Returned: code: 1 signal: null
12 info lifecycle @~development: Failed to exec development script
13 verbose stack Error: @ development: cross-env NODE_ENV=development webpack --progress --hide-modules --env=local --config=node_modules/laravel-mix/setup/webpack.config.js
13 verbose stack Exit status 1
13 verbose stack at EventEmitter. (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:283:16)
13 verbose stack at EventEmitter.emit (events.js:180:13)
13 verbose stack at ChildProcess. (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack at ChildProcess.emit (events.js:180:13)
13 verbose stack at maybeClose (internal/child_process.js:936:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:220:5)
14 verbose pkgid @
15 verbose cwd /Users/bart/Code/docs/tailwindcss
16 verbose Darwin 16.7.0
17 verbose argv "/usr/local/Cellar/node/9.11.1/bin/node" "/usr/local/bin/npm" "run" "development"
18 verbose node v9.11.1
19 verbose npm v5.8.0
20 error code ELIFECYCLE
21 error errno 1
22 error @ development: cross-env NODE_ENV=development webpack --progress --hide-modules --env=local --config=node_modules/laravel-mix/setup/webpack.config.js
22 error Exit status 1
23 error Failed at the @ development script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

• I want to propose making the current Tailwind available via css.tailwindcss.com in addition to just pointing to the CDN

Reasoning:

• It is more accessible for beginners
• It is easy to tell a beginner: Just add link + tab and add //css.tailwindcss.com after the <title> line in jsbin.com
• I'm teaching a lot of total HTML/CSS newbies for my non-profit, all of them 13-17 years old
• We start by writing some easy classes in jsbin, already with a utility based approach and naming
• After 10 own rules I tell them: You could invent 1000s of own rules or use predefined
• But now I then point them to tailwindcss.com > Installation and ask them to copy the CDN link
• That creates confusion every time
• We host tailwind's CSS on our server (css.code.design)
• You could just CNAME forward to a CDN

This table currently says that "outline" only includes "hover" variants, not "focus". The checkmark should be in the other column (or the column titles should be switched).

https://github.com/tailwindcss/docs/blame/master/source/docs/pseudo-class-variants.blade.md#L349

Your README relates to npm, but in the repo is a yarn.lock. I wanted to create a PR, but thought it doesn't make sense if I don't know if you'd prefer yarn or npm.

Where offline docs?

I propose we add the conclusion coming from here tailwindlabs/tailwindcss#32.

The section could be called A note on CSS Grids so that folks find it when they search the documentation.

I can contribute a pull request if the maintainers think it's a good idea.

When searching on https://next.tailwindcss.com/docs - you are taken back to the current "0.7.4" results - this is most likely known already, thought i'd open an issue incase you hadn't spotted it. Also assuming this will automatically fix itself when v1 moves to the main domain 😄

Here's an example:

@include('_partials.class-table', [
  'rows' => [
    [
      '.fill-current',
      'fill: currentColor;',
      'Set the fill color to the current text color.',
    ],
    [
      '.stroke-current',
      'stroke: currentColor;',
      'Set the stroke color to the current text color.',
    ],
  ]
])

The descriptive texts "Set the fill color to the current text color" and "Set the stroke color to the current text color" don't appear anywhere in the generated docs. Should they? All the rows in all the _partials.class-table have a descriptive text like this.

Simply, it doesn't apply any responsive styles, which also means it isn't activated at all. https://tailwindcss.com/docs/object-fit/

If this is intended it might be worth noting that this is disabled until at least on of the state modifications is applied.

I often find myself not knowing which property maps to which utility. So I think indexing the property against the utility would be beneficial.

It would be way cool to have something like this:

http://tachyons.io/docs/debug/

Hi, wasn't sure if this was intentional or not so I thought I would drop it here.

I plan on trying out tailwind soon, thanks for all the work!

Hey @adamwathan,

I wanted to do a shameless plug for my new CSS purging lib. I wrote it after encountering numerous unresolved/unresolvable issues with PurgeCSS.

https://github.com/leeoniya/dropcss

Recent discussions:

Initial alpha:

• https://old.reddit.com/r/javascript/comments/b3mcu8/dropcss_010_a_minimal_and_thorough_unused_css/
• https://news.ycombinator.com/item?id=19469080

v1.0.0 milestone (with more prose):

• https://old.reddit.com/r/javascript/comments/bb7im2/dropcss_v100_an_exceptionally_fast_thorough_and/

Feel free to close this issue without comment, too - no feelings will be hurt.

cheers and thanks!
Leon

Does that in all one-line snippets of code which have an x-overflow:

A possible solution would be add a padding-bottom to each <pre>.

How do you fix cygwin issue in windows 10 ? I have this

D:\www\github-projects\offline_docs\tailwindcss_docs (master)
$ php vendor/bin/jigsaw serve

dir=$(cd "${0%[/\\]*}" > /dev/null; cd "../tightenco/jigsaw" && pwd)

if [ -d /proc/cygdrive ] && [[ $(which php) == $(readlink -n /proc/cygdrive)/* ]]; then
   # We are in Cgywin using Windows php, so the path must be translated
   dir=$(cygpath -m "$dir");
fi

"${dir}/jigsaw" "$@"

Hey @adamwathan could you bring back the colour palette the way it was in the pre 1.0 documentation, was a little easier visually to pick a colour.

Also it would be good instead of only saying 100 to say red-100, which would make it easy to copy and paste a colour.

• Khary

Hey @adamwathan,

The impact line in the upgrade guide needs some space.

https://next.tailwindcss.com/docs/upgrading-to-v1/

<p class="italic font-normal text-gray-600 -mt-2">Impact: All users, Effort: Moderate</p>

Removing the -mt-2 seems to fix it.

Cheers,
Dilantha

https://tailwindcss.com/docs/flexbox-justify-content

The menu doesn't stays with the Navbar.

The h2 headings on the docs pages when using Microsoft Edge don't allow interaction with elements behind them.

Screenshot attached.

Works fine in Chrome/Firefox latest.

Step to reproduce:

1. Go to https://tailwindcss.com/resources or https://tailwindcss.com/community.
2. Click a link under ON THIS PAGE.
3. Anchor scrolling doesn't work.

It's because <h2> elements don't have id attributes.

Hey @adamwathan and Tailwind crew! I love Tailwind. I just did a fresh setup on a Statamic site and found that Jeffrey Way's laravel-mix-tailwind plugin was a bit simpler than the Installation instructions found here for integrating Tailwind with Laravel Mix:

var tailwindcss = require('tailwindcss');

mix.sass('resources/sass/app.scss', 'public/css')
  .options({
    processCssUrls: false,
    postCss: [ tailwindcss('./path/to/your/tailwind.js') ],
});

With the Mix plugin it simplifies to this:

require('laravel-mix-tailwind')

mix
  .sass('resources/sass/app.scss', 'public/css')
  .tailwind()

Thought this might help other folks, but open to your thoughts.

The Font Size page seems to be lacking theming instructions + code example.