I checked extra hard this time and didn't find anything to help with tables (border-collapse and all that jazz). I'm ready to admit I still missed something though but thought it's time to ask: Missed it, to-do, or ain't gunna?

I am trying to add a new at-rule to tailwind and am having some issues. I am not extremely familiar with the proper way to build NPM modules, but the way I know is to clone your repo down and then use npm link to utilize the local repo instead of the production one.

That being said, I have cloned down tailwind, npm linked it to a project where I am experimenting with it, and trying to add an at-rule. Within my at-rule code I am console.loging different things just to check to see if my code is even running. Running webpack (via laravel mix) does not send what I am expecting to the console. Running the tailwind cli returns an error:

module.js:544
    throw err;
    ^

Error: Cannot find module '/package.json'
    at Function.Module._resolveFilename (module.js:542:15)
    at Function.Module._load (module.js:472:25)
    at Module.require (module.js:585:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/xxxxxx/Packages/tailwindcss/lib/cli.js:67:21)
    at Module._compile (module.js:641:30)
    at Object.Module._extensions..js (module.js:652:10)
    at Module.load (module.js:560:32)
    at tryModuleLoad (module.js:503:12)
    at Function.Module._load (module.js:495:3)
    at Function.Module.runMain (module.js:682:10)
    at startup (bootstrap_node.js:191:16)
    at bootstrap_node.js:613:3

Here is the code for my at-rule:

console.log('woah');
export default function() {
  console.log('test');
  return function(css) {
    css.walkAtRules('variants', atRule => {
      console.log('atRule', atRule);

      atRule.walkRules(rule => {
        console.log('rule', rule);
      })

    //   atRule.before(cloneNodes(atRule.nodes))

    //   atRule.remove()
    })
  }
}

and the added code to register it with postcss in the index.js file:

line 10:

import generateVariants from './lib/generateVariants'

line 39:

generateVariants(lazyConfig),

Help with this issue would be appreciated, but more so, a guide on how to contribute would be awesome.

Hi all,
First off, thanks so much for your work here!

Are there any plans to add a responsive grid to Tailwind CSS that does not use Flexbox? Flexbox is the future but out of reach for many corporate clients that lag behind current tech. The answer is likely no, and I'd complete understand that, but thought I'd ask.

Thanks!
Phil

Hi guys

This seems like a cool project. However maybe add a sample project to github where you have the build process with your cli panned out. I shortly tried creating the contact card component you have as an example using tailwind cli witht he help of your installation page, but not all was clear to me how things work togheter.

How do the inline styles get processed for example? It seems the tailwind-cli only processes the stylesheet (css) when using build?

Kindly, riscie

Preface: I'm brand new to React and Webpack, so this question is all kinds of naive.

Say I have two components: App and Card. The Webpack entry point is App.js, which imports App.css and Card.js. Card.js imports Card.css. How do I ensure Webpack concatenates the CSS in the correct order? That order being:

1. The @tailwind preflight directive;
2. All the component styles;
3. And the @tailwind utilities directive and any custom utilities.

Thanks for any help. Tailwind looks really, really great. I can't wait to give it a try.

Hey y’all,

I’ve put together a first-pass of a scaffolding preset for Laravel. It’s not too different visually to the bootstrap defaults, but at least let’s you see how to get started.

Probably some responsive issues, etc.

Will refine in time as I get my head around this utility-focussed stuff 🤙🏻

laravel-frontend-presets/tailwindcss

Hi,

I'm trying out the alpha version, and I just want to know if will be there helpers for display: grid.

Hey guys,

First of all, I'm very happy to see so many people trying out Tailwind and trying to create prototypes, demos, clones and even redesigning entire websites using the framework.

I've been very active in researching utility css frameworks for my own use in the past few months, before Tailwind was actually launched.

After the launch of Tailwind I decided I should try and collect as many Tailwind demos & examples as possible, and also, start a snippets library, because people will start searching a lot on Google for examples, and it wouldn't hurt to stumble upon an organized set of resources.

Yesterday I launched https://tailwindexpo.com/ and already collected a few examples.

Do you have more demos & examples you want to be featured in TailwindExpo?

If so, please DM or @ me on Twitter and let me know.

PS: I hope the makers of Tailwind don't mind me creating this website, if there's any issue with it, just DM me and let me know. I'm not in any way affiliated with the makers, just extremely enthusiast about the framework.

I couldn't find a way to give different colors to different sides of an element's borders. If I use border-green for example, all borders on 4 sides will take this color.

Is there any workaround I don't know about?

I've been working on implementing some dropdown menus with Tailwind and I'm seeing some weird behaviour with other dropdown menu controls.

I'm sure I haven't done something correctly so would appreciate any advice anyone can provide.

When the menu is collapsed, everything looks as expected:

When the menu is expanded, controls for other dropdown menus float above the menu, even though no z-indexs have been set:

Any help would be much appreciated!

I feel like postCss with tailwind is powerful enough with composable components what are the reasons that would want you to use tailwind with sass/less ?

Sorry for the noob question.

How can I set a global .no-underline for links like you have for the docs? I tried to see where you are setting it but .no-underline only works for me if I put it on each anchor tag. I even tried putting it on the body tag.

In my app.less, I tried to use one of the configged colors in a Less function:

  @base_color: config('colors.grey');
  .input[type=text], .input[type=password] {
    background-color: fade(@base_color, 50%);
  }

This resulted in an error Error evaluating function 'fade': color.toHSL is not a function.
Is there a way around this? Am I wrong in expecting the colors array to contain Less color objects?

Here's my Mix config:

mix.js('frontend/assets/js/app.js', 'javascript/')
    .less('frontend/assets/less/app.less', 'style/')
    .options({
        extractVueStyles : true,
        postCss: [
            tailwindcss('tailwind.config.js'),
            require('autoprefixer')
        ]
    })
    .sourceMaps();

Alternatively: Is there another way to get transparent variants of the tailwind colors?

Thanks,
Alex

I think we should have an option to change the separator of screen size.
For example: .md:w-1/3 --> .md${config.screenSeparator}w-1/3
Reason:
Tailwindcss has some special characters in className that are not supported by default in Pug.js template engine. (e.g: '/', ':')

I've been reading the documentation, and am struggling to get a container to be full-width. I have tried the following:

        <div class="container w-screen mt-4">
            <div class="bg-blue-lightest border-l-4 border-blue text-blue-dark p-4"
                role="alert"
            >
                <p class="font-bold">Oops!</p>
                <p>No images have been added yet. Please check back soon!</p>
            </div>
        </div>

        <div class="container w-full mt-4">
            <div class="bg-blue-lightest border-l-4 border-blue text-blue-dark p-4"
                role="alert"
            >
                <p class="font-bold">Oops!</p>
                <p>No images have been added yet. Please check back soon!</p>
            </div>
        </div>

Is the solution here to drop the container, and do something like this?

    <div class="w-screen mt-4"> <!-- instead of container-fluid here -->
        @forelse ($images as $image)
            <img class="sm:1/2 md:1/4 lg:1/8 xl:1/12"
                src=""
            >
        @empty
            <div class="container mx-auto">
                <div class="bg-blue-lightest border-l-4 border-blue text-blue-dark p-4"
                    role="alert"
                >
                    <p class="font-bold">Oops!</p>
                    <p>No images have been added yet. Please check back soon!</p>
                </div>
            </div>
        @endforelse
    </div>

Sorry for my newb question :) just started diving into it and am working on wrapping my head around the concepts and opinions this frameworks works under. :)

Update: added comment in code to clarify where I was looking to make full-width. Sorry for the confusion.

How can I make a sidebar with Tailwind?
Reference: tailwindlabs/tailwindcss#47

I've got a weird problem, and I'm not discounting user error, but figured someone could rubber-duck this with me...

The simple version of my problem is.

html file
<div class="container"> </div>

... is not doing the same thing as...

html file
<div class="something-unique"></div>

scss file
.something-unique { @apply .container; }

Specifically, Chrome never gets the max-width declarations when I'm using @apply that it does when I'm using the class.

I'm able to @apply all other sorts of things just fine. But container just doesn't work. Any thoughts? Something related to responsivity?

Hello,
I'm wondering, maybe It's logical to use tailwindcss as it is, but instead of using all css classes in HTML, we'll use semantic friendly class names and after build apply all @apply-ed classes.

I'll try to explain what I mean:

src:

html
<div class="super-div">super div content</div>

css

.super-div {
  @apply .font-bold .py-2 .px-4 .rounded;
  border-radius:50px;
}

dist:

html
<div class=".font-bold .py-2 .px-4 .rounded super-div">super div content</div>

css

.super-div {
  border-radius:50px;
}

Does this make sense?

Firstly, congratulations to @adamwathan, @reinink, @davidhemphill and Steve Schoger for an absolutely incredible release. Incredible in that it's immeasurably usable in it's current Alpha state and also that it's just beautiful and rapid-fire to use. Serious kudos to you all.

My go to preprocessor for CSS is Stylus. Hooking up Tailwind with Stylus was absolutely no issue whatsoever until I came to trying out extracted components.

Messing around with vertical aligning flex items, this did not seem to work:

.y-center {
  @apply .flex .flex-col .justify-center;
}

but was resolved by using Stylus' @css literal:

@css {
    .y-center {
        @apply .flex .flex-col .justify-center;
    }
}

I haven't tried this out with any other preprocessor but more of a head's up for anyone who is using Stylus.

With limited knowledge I think it's to do with how Stylus processes @rules, i.e. It just outputs them verbatim. I note in my output app.css file, the @apply rule appears literally, whereas when I use the @css literal, it appears as expected.

I shamelessly admit that CSS is not my forte, and its "hacks" even less than that.

I've spent quite a bit of time trying to make gutters work on a form I was working on, and I couldn't figure, for the life of me, why they weren't working. Ok, so I have to make this flex, and add a negative margin for some reason. The bottom items… nah, I'm good, I already have the width I want, and I don't want padding, let's try it. What the…

After dom inspecting, colorful cursing and creative googling "flex negative margin thingy", I understood how the "hack" worked (I know it's not a hack).

What I'm trying to get at here is that maybe it could be clearer in the docs that you have to use the same padding as the negative margin, maybe a short note or highlighting the number 4, we'll figure it out.

Just in case someone comes searching for it in the future, probably me in a few weeks days, you have to make the negative margin the same as the horizontal padding.

Hi,
I noticed that there is no mention of any Licensing for tailwindcss. Would like to have some light in this area.. just curious!!

anyone used this with vue webpack? please help

I found this page today and I imagine Tailwind (@ v1.0 ?) could find it's place on this design essentials page 💯 . If the team wants, feel free to close this page. Just a suggestion I thought didn't fit under tailwind issue tracker, peace!

copy-paste from msg to Adam on the Laravel slack:

Hi there! I was wondering - can't seem to set just a bottom border for inputs in tailwind.. doing border-none border-b border-grey-dark results in border none being the most powerful one... 😕 (edited)

I'm not much of a JS hero, so all the build tools: Webpack, Postcss etc feel like one big magic show to me. Is there anyone around here that has more experience with these tools that could create an example app with the bare configuration that is required for Ruby on Rails?

In return I'll make sure that the steps to set it up are added to the docs :-)

Use tailwindcss with webpack

I follow the documentation without success any help ?

Would be awesome to have a showcase section added to the docs to show off sites, apps, projects, and diddle daddles that use Tailwind!

Currently the assumption is made that the options passed into tailwind (and postcss) is a path string that gets resolved and required to then become the options used by tailwind. Due to how some build tools work (ie. broccoli) this can be problematic since it moves files to a tmp directory and does partial rebuilds using the file system.

Would you consider making it possible to pass the options in as an object? A check could be added where if the options are a string the current behavior remains, but if the options are an object they are used directly.

This would also make it easier to use tailwind with the Ember.js build pipeline.

I could create a PR if you're interested.

Cheers.

I'm trying to integrate tailwindcss into an existing site that is built with laravel-spark using less and laravel-mix

When I add @tailwind preflight; and @tailwind utilities; to my app.less file, I get the following error from npm run watch:

error in ./resources/assets/less/app.less

Module build failed: ModuleBuildError: Module build failed: TypeError:
atRule.before is not a function
at css.walkAtRules.atRule
(/var/www/html/node_modules/tailwindcss/lib/lib/substitutePreflightAtRule.js:13:16)

...

here is my webpack.mix.js:

mix.less('resources/assets/less/app.less', 'public/css')
  .options({
    postCss: [
      tailwindcss('./tailwind.js'),
    ]
  })
  .copy('node_modules/sweetalert/dist/sweetalert.min.js', 'public/js/sweetalert.min.js')
  .copy('node_modules/sweetalert/dist/sweetalert.css', 'public/css/sweetalert.css')
  .js('resources/assets/js/app.js', 'public/js')
  .webpackConfig({
      resolve: {
          modules: [
              path.resolve(__dirname, 'vendor/laravel/spark/resources/assets/js'),
              'node_modules'
          ],
          alias: {
              'vue$': 'vue/dist/vue.js'
          }
      }
  });

Any thoughts/suggestions? Much obliged.

My first thought when starting to use Tailwind was: how would I use this with Jekyll? Here is a starter kit I built. I'm not sure if this will be of much use, but if it helps even one person, I'm happy.

There's an issue with WebStorm/PhpStorm which makes CSS frameworks like Tailwind a bit challenging to use.

Since there's escaped charactes in the class names, auto-completion in formentioned IDE's doesn't work as expected.

See YouTrack issue for more information: https://youtrack.jetbrains.com/issue/WEB-18947

If this one bugs you, it would be nice if you could go and give it a 👍
Hopefully it would be eventually fixed and we could enjoy fully functional auto-completion.

I don't know what could be done about this issue, but the framework is heavyweight, even minified, in comparison with other frameworks (including similar ones like tachyons). Still I already really appreciate your work, and I'm sure I will soon fall in love with this framework. Do you have any plan to optimize it?

Are there plans to add utility classes to control the opacity of a background or element?

Maybe something like: o-{level} or opacity-{level}.

Example:

<div class="bg-blue w-64 h-64 opacity-10"></div>

The CSS output would be something like this:

opacity-10 {
    opacity: 0.1;
    filter: alpha(opacity=10); /* For IE8 and earlier */
}

I'm trying to make 2-column layout, where main column always takes available space, and sidebar is fixed sized: 300px on xl, lg and md screens. On sm screens should be 100%, in a row below main column.

Probably need to use additional css classes, but still not sure how to do that in tailwindcss way :) Can you give me some hints?

Hi,

I looked into positioning https://tailwindcss.com/docs/positioning and created a layout with several containers. These containers represents areas like: Header, Sub-Navigation, Content, Teaser, Footer

I used the positioning values like pin-t, pin-b but it seems to be that the containers do not stick. So I used several plugins like sticky-kit(http://leafo.net/sticky-kit/ ) or stickyjs (http://stickyjs.com) to try to stick it via javascript. But this did not work for all elements and resulted into a lot of strange behaviours.

How can I stick elements with tailwindcss ? Thanks!!

`

<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Laravel</title>

    <link  rel="stylesheet" href="{{mix('/css/main.css')}}">
    <!-- Styles -->


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://cdn.rawgit.com/leafo/sticky-kit/v1.1.2/jquery.sticky-kit.min.js"></script>
    <style>



    </style>
</head>

<body class="jq-sticky-banner-parent jq-sticky-subbanner-parent jq-sticky-teaser-parent">

    <div class="pin-x pin-t h-16 bg-grey jq-sticky-banner"></div>
    <div class="relative bg-purple clearfix" >
        <div class="w-2/3 float-left" >
            <div class="pin-t h-16 bg-blue jq-sticky-subbanner"></div>
            <div class="pin-t bg-yellow">
                <p class="mb-4">Scroll me!</p> <p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. </p> <p class="mb-4">Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p> <p class="mb-4">Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. </p> <p class="mb-4">Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. </p> <p class="mb-4">Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus, accumsan porttitor, cursus quis, aliquet eget, justo. Sed pretium blandit orci. Ut eu diam at pede suscipit sodales. Aenean lectus elit, fermentum non, convallis id, sagittis at, neque. </p> <p class="mb-4">Nullam mauris orci, aliquet et, iaculis et, viverra vitae, ligula. Nulla ut felis in purus aliquam imperdiet. Maecenas aliquet mollis lectus. Vivamus consectetuer risus et tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. </p> <p class="mb-4">Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. </p> <p>Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. </p>
            </div>
        </div>

        <div class="absolute float-right pin-y pin-r w-1/3 bg-red jq-sticky-teaser"> dd  </div>

    </div>
    <div class="pin-x pin-b h-16 bg-green">   </div>


</body>


<script>

   $( document ).ready(function() {
        
        /*
        $(".jq-sticky-banner").stick_in_parent({recalc_every: 1, parent: ".jq-sticky-banner-parent"});
        $(".jq-sticky-subbanner").stick_in_parent({recalc_every: 1, parent: ".jq-sticky-subbanner-parent"});
        $(".jq-sticky-teaser").stick_in_parent({recalc_every: 1, parent: ".jq-sticky-teaser-parent"});
        */
    });



</script>
</html>

`

I´ve been trying to replicate this

@tailwind preflight;

@import  "components/buttons";

@tailwind utilities;

But I can´t get components/buttons.css parsed by tailwind.

Btw if I just put css between preflight and utilities it works.

What I´m missing?

For non front-end devs like me, I would appreciate an example of a menu exactly like that of what is in the docs.

Hi @adamwathan & Co,

I know you are working on examples, below is my conversion of the first Bootstrap Example.

Firstly is this the place to suggest such things?

Secondly - how the heck do I get that button to size the same as the button without custom padding spacing 😈 (Please ignore if not appropriate here)

Happy to build more if you want to offload some effort from the core team.

Gist

Hi Guys I've been trying to make this work with nuxt.js smoothly but I am not successful.

Is it possible to implement this together with nuxt without using gulp only webpack?

Hey, Loving TW so far!

I'm working on a Vue project and I would like to import the tailwind config so that I can access the colors property and pull out a value so I can have a central place for those variables.

This is probably a newbie question but what's the best way to import that default export and access those variables? The way I'm doing it it's bitching about dependencies. Thanks for the work and help!

Hey!

Over the years, I've become a proponent of functional CSS. I had been working on a similar framework for myself, personal projects, and client work (https://github.com/decent-css/decent); but, of course, I haven't been able to completely finish it. If there is any way I can help contribute to Tailwind and get it out of alpha, I'd love to be a part of it!

Hey guys, I know this repo is specifically for discussions (that don't fit under tailwindcss issues). I thought you wouldn't mind if I share what I made today and hope it doesn't come off rude. Hopefully it will be helpful for at least some of you.

Made it today, had lots of fun, I'll add a readme and MIT license soon I promise. I intend to make the editor a bit smarter than a raw textarea soonish 😅 as well as add a couple features.

@adamwathan - hope you don't mind I called it Tailwind Fiddle. I thought of putting "tailwind-fiddle" in the url, but then I was like "JSFiddle will hit me up and complain" lol, so I just made the url like so:

https://tailwind.unravel.eu

Enjoy folks!

First of all congratulations to and a big thanks for releasing Tailwind, it's looking great so far.

I'm having one problem which I'm not quite sure on how to best solve: Currently it's not possible to use breakpoint prefixes when extracting a component. Any chance to make this happen?

Currently when trying to do something like:

.foo {
    @apply .bg-blue .sm:bg-green;
}

I get: CssSyntaxError: /Users/daniel/lab/tailwind/src/styles.css:21:5: No .sm\:bg-green class found.

Curious if we can start tracking milestones and features using the Projects functionality? It would be great to know what items are on the roadmap and which are slated for v1.0.0

I always have a hard time remembering spacing (arbitrary) values (i.e. 8 = 2rem). And the arbitrary numbers makes it a bit harder to insert in-between values along the way.

Since Tailwind allows to set whatever value we want, I decided to switch to 3 digits numbers that match the rem values.

  padding: {
    'px': '1px',
    '0': '0',
    '025': '0.25rem',
    '050': '0.5rem',
    '075': '0.75rem',
    '100': '1rem',
    '150': '1.5rem',
    '200': '2rem',
  },

I use this for padding, margin and negative margin. This is more verbose, but easier to remember. :)

What do you think?

Hi is it possible to add support for custom class for less or sass?

Something like this?

<div class="image-wrapper">
    <img src="...">
</div>

.image-wrapper {
    .pin-l
    .block
    .visible
    .z-10
}

How can I update the docs? I wanted to fix a couple of typos but I couldn't follow the process/workflow to actually update the docs. If you could provide a quick walkthrough or even add it to the docs under a 'Contributing' heading then I as well as others will be happy to update them when/where we can.

im sorry i couldn't resist

I ask this as a person who has not researched Tailwind yet so please be kind, I mean no disrespect I just haven't had a chance to look over it yet, I have just been following the concept and it sounds very interesting.

My question: Can I add this to my project with a regular external link css tag, or through a cdn? As in, can it be encapsulated into a single include, or do I need to have some npm, etc set up to work with it?

If not, is it possible or are there any plans to do it as such? I ask because that's just where I am at right now with front end tooling.

What do you guys to do optimize the final output? Even after trimming down a lot of unused vars (colors, etc), the generated base output is 13k lines at 180kb+. Just curious if there's a way to turn off helpers I know wouldn't end up using as a place to start.

Update: There are now docs on how to do this. Lots of control.
https://tailwindcss.com/docs/controlling-file-size/